A metadata (or semantic) tag on a webpage is an element in the page’s HTML that can be used to store structured information.
When reading a webpage, Echobox can extract metadata such as title, description, images etc.
Echobox uses this information as part of our algorithms and to help prepopulate article data within the platform, saving you lots of time. The tags also ensure that everyone in your social audience who shares or reshares your content on their private accounts always gets the share information shown as you would like them to. Echobox requires that these tags are implemented as thoroughly as possible at the moment of publication.
There are several standard protocols available for inclusion in metadata, including Facebook’s Open Graph tags and Twitters Cards.
Facebook: Open Graph Protocol
Open Graph tags (OG tags) are snippets of code that determine how a link is previewed when shared, including the title, description, image, URL, and more. The Open Graph protocol allows any web page to control how it is displayed on Facebook (and has been adopted by other social networks and tools for sharing articles).
To customize your web pages, you need to add basic metadata to your page. The four required properties for every page are:
- og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
- og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
- og:image - An image URL which should represent your object within the graph.
- og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "http://www.imdb.com/title/tt0117500/".
As an example, the following is the Open Graph protocol markup for The Rock on IMDB:
Twitter: Twitter Card
With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to a website. By adding a few lines of markup to your webpage, users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to their followers.
The different Card types each have a different layout built for Twitter’s web and mobile clients:
- Summary Card: Title, description, and thumbnail.
- Summary Card with Large Image: Similar to the Summary Card, but with a prominently-featured image.
- App Card: A Card with a direct download to a mobile app.
- Player Card: A Card that can display video/audio/media.
Testing Data Sources
You can review your article’s data sources within Echobox Social using the Preview Data Sources Tool. Navigate to Settings > Page > Default Share Preview, where you can paste in an article URL and review the different values (see below).
Facebook provides the Sharing Debugger and Twitter provides the Card Validator.
Default Share Preview
The Default Preview settings allow you to set which data sources you would like Echobox to pull from your article. On this page, you can insert your link and preview your article’s data sources. You can update where Echobox gets the information for the title, share message, description, and image to customize your preview page.
