Optimizing Metadata and Images

The first time someone shares or likes a URL, the Facebook Crawler caches the resolved canonical URL and its metadata. You can view the results of this cache or force a re-scrape with the Sharing Debugger.

Optimizing Metadata

You can optimize content by delivering only Open Graph meta tags to the crawler and only the content itself to regular users. Alternatively, you can choose to point the crawler to a separate page used only for metadata with <link rel="opengraph" href="..."/>.

Handling Large Objects With Pointers

If your content has large amounts of metadata, you can improve performance by serving the metadata and content from two separate URLs and using pointers to link the two pages. This approach is ideal for responsive sites because you can serve the same page to both desktop and mobile browsers.

The URL where your content is hosted should contain the required Open Graph tags.

Then, add an additional tag pointing to the page where extra metadata is hosted:

<link rel="opengraph" href="{DESTINATION_URL}"/>

At the destination URL, include any additional metadata as well as a pointer to the original page:

<meta property="og:type" content="metadata"/>
<link rel="origin" href={SOURCE_URL}/>

Keep in mind:

  • The source URL must contain the basic tags
  • The source URL can have as many pointers as you like, but each page it points to should point back with a link rel="origin" tag
  • Pointers are only one level deep, so a page of type ‘metadata’ can't contain another link rel="opengraph"

Optimizing for a Mobile Subdomain

Web apps that use subdomains for mobile-optimized versions can avoid adding extra metadata to the mobile views of their pages by using canonical URLs pointing to the desktop view of the same content.

Just add this meta tag to the mobile URL:

<link rel="canonical" href="DESKTOP_OBJECT_URL" />

Make sure that you use an absolute path, rather than a relative path, for your canonical href value.

The desktop page should include the basic Open Graph tags for your content, as it will be used by Facebook's scraper to uniquely identify that content.

Optimizing Images

We cache all images referenced based on each image's URL, so if you replace an image:

  • Use a new URL for the new image or the image won't be updated
  • Don't remove old images, as there maybe existing stories that reference the old image

Images are cached asynchronously, so the image may not render the first time someone shares your content. You can avoid this by either:

  • Pre-caching your image by triggering a scrape with the Sharing Debugger
  • Using og:image:height and og:image:width tags to explicitly designate the image