Documentation

Meta Tag Integration

If you wish to integrate EmbedX to your website's meta tags, you will need to make a modification to your website.

Advantages

  • Everytime any users shares one of your articles, the correct thumbnail will be displayed.
  • The URL preview (bottom left corner) on X/Twitter will show your own domain.

Drawbacks

  • You will need to modify your website source code.

In order to display your article's title & description, we will automatically crawl your website. You can display alternative titles & descriptions if you make use of embedx: meta tags.

We will always crawl your meta tags in the following order.

Title

  1. <meta name="embedx:title" />
  2. <meta name="twitter:title" />
  3. <meta property="og:title" />
  4. <title />

Description

  1. <meta name="embedx:description" />
  2. <meta name="twitter:description" />
  3. <meta property="og:description" />
  4. <meta name="description" />

Image

  1. <meta name="embedx:image" />
  2. <meta property="og:image" />

Manual Integration

Make changes to your website manually in three easy steps.

To allow EmbedX to fetch your website content, you need to replace the existing image meta tag (like twitter:image) with the following components:

  1. The EmbedX endpoint https://i.embedx.app/
  2. The URL to your post example.com/posts/my-post (without https://)

Warning: You need to include at least one image meta tag that contains the URL to your original image. The can be an embedx:image or og:image tag.

Before

<meta name="og:image" content="https://example.com/images/my-post.jpg" />
<meta name="twitter:image" content="https://example.com/images/my-post.jpg" />

After

<meta name="embedx:image" content="https://example.com/images/my-post.jpg" />

<meta name="og:image" content="https://example.com/images/my-post.jpg" />
<meta name="twitter:image" content="https://i.embedx.app/example.com/posts/my-post" />

Best practices

  • Make sure to add descriptive meta tags for your content such as og:title and og:description
  • Allow our crawler to request your website content. We will always crawl with the User-Agent EmbedX-Crawler/1.0

Avatar mode

If you primarily service squared images (like user avatars), you can provide an additional embedx:background meta tag to instruct or crawler to render Embeds in an optimized way.

For this you need to provide the embedx:background element with a valid absolute URL to an background image which will be placed behind the actual primary image.

<meta name="embedx:background" content="https://example.com/images/background.jpg" />

This can look like:

Avatar Mode Example

Shortener (Proxy)

With our Shortener/Proxy you don't have to make any modifications to your website. Simply prefix the shared URL with https://s.embedx.app/. All normal users will be redirected to your original page. If we detect activity from the X/Twitter Crawler (Twitterbot) we will render a page which contains metadata referring to the EmbedX thumbnail.

If you only wish to use the Shortener/Proxy, be aware that URLs without the s.embedx.app prefix will not be displayed with an EmbedX thumbnail.

Advantages

  • You don't have to make any modifications to your website's source code.

Drawbacks

  • In order to display the correct thumbnail preview, you will need to use the prefixed URL with "s.embedx.app". When only sharing your original URL, there is no rich preview thumbnail.
  • The URL preview (bottom left corner) on X/Twitter will show "s.embedx.app".

Example

https://example.com/posts/my-post
https://s.embedx.app/example.com/posts/my-post