Social Media Metadata: Facebook Open Graph and Twitter Cards
There are many ways to share a site's content properly on social media platforms such as Facebook and Twitter. Unfortunately, social media platforms rarely follow similar sharing procedures. WebSight Design can help to implement proper sharing functionalities on a site, taking into account all of the various API (Application Programming Interface) tools to be utilized. This guide aims to clearly explain social media metadata and how to implement Facebook Open Graph and Twitter Cards.
What is Metadata?
Metadata by definition, is data about data. It is invisible to web users, located within the <head> tags of a page, and gives information to search engines and other websites about a site and its content. Metadata is useful because it allows the user to read a short summary of a webpage when it appears as a search result in a search engine or when it is shared on a social media platform. When a link is shared on Facebook, for example, it will most likely include a thumbnail image, a bolded title and a short description of the page. All of these elements are part of Facebook's sharing system called Open Graph - how metadata is set so it properly displays on Facebook.
To read more about metadata on webpages, read WSD's SEO metadata best practices guide.
Why Include Social Media Metadata on a Site?
The way a pages' information appears on search engines and social media can greatly influence the behavior of web users. Researches have proven on average, a Google user will only look at each result on a Search Engine Result Page (SERP) for about 2 seconds. Therefore, it is key to catch searchers' attention to encourage a click through. Correctly worded and displayed metadata like titles and meta descriptions, can improve the click-though rate. The same method applies for pages shared on Facebook and Twitter.
If Facebook-specific metadata is not set for a page without images, Facebook will default to the regular metadata and will not show an image, providing a very unattractive post. Twitter has recently rolled out a new feature for their link sharing options called Twitter Cards. Twitter Cards allow users to share a page on Twitter and provide a title, a short summary of the page, and an image along with other integration tools with a Twitter account. Implementing Twitter Cards metadata increases the click through and retweet rate from other Twitter users.
Tags
Metadata is comprised of various tags that allow page owners to give more information to other sites. Tags are used to indicate what function each part of a page will have. For example, in HTML (the language used most to create text content on web pages),tags will be used to wrap text and give it a specific appearance. Header tags such as <h1> give the highest indication of what the page is about and the text associated generally appears in a larger, more distinctive font. Tags <b> and <i> will respectively turn text bolded or italicized.
Tags in social media metadata works the same way, except they determine how the page is supposed to appear and what information to give to other websites when sharing a page. Each type gives a page characteristics.
Here are a few examples of tags to be found using Facebook's Open Graph system:
And here are a few examples of tags to be found using Twitter Cards:
Implementation of Open Graph and Twitter Cards
Open Graph and Twitter cards can be implemented in different ways on the pages of a site. Sites with robust back-ends (administrators) can tie together the page content manager and the site's meta. It is usually easier and more flexible to create new fillable fields for Facebook and Twitter's titles, metadescriptions and thumbnails. This allows site owners to quickly customize meta for both social media platforms and each of a site's pages and articles when posting new content.
It is also possible to manually create social media metadata on pages using variables pulling directly from a site's dabatase. This method is useful to create dynamic metadata generated directly from the content of a site, including the titles and the images of each specific page.
Implementing Open Graph and Twitter Cards can be a relatively complicated and nerve-racking job. However, both Facebook and Twitter platforms allow for great flexibility with a site's marketing strategy. Site owners can improve click-through rates, customize URL displays, tailor titles and descriptions, embed video players, choose the correct thumbnails, and more. Both platforms can help conduct Search Engine Marketing and Social Media Marketing strategies separately and more precisely.
More information about Open Graph and Twitter Cards is provided on Facebook's protocol page and Twitter's Cards support page.
Wordpress
On Wordpress, adding Open Graph and Twitter Card is much easier because in most cases lines of code will not need to be written. For Facebook, we recommend the use of the Open Graph plugin. For Twitter, we recommend downloading this Twitter Cards plugin.
If you would like to learn more the implementation of the Open Graph platform and Twitter Cards, Contact us today.