Understanding Social Media Meta Tags & Open Graph Protocol

Do you know the Social Media Meta Tags and Open Graph Protocol can affect social media traffic? When you are sharing a url to social networks, they will find the social information which you defined between head tags, if it’s not available, they will get it’s in the post content.
Social Media Meta Tags and Open Graph Protocol are common names of Google Authorship, Twitter Card, Facebook Open Graph … Here’s how you can leverage both of them:

Open Graph Protocol

To turn your web pages into graph objects, you need to add basic metadata to your page. The five required properties for every page are:

• og:title – The title of your object as it should appear within the graph, e.g., “NARGA”. When creating your og:title keep the character count fewer than 95 characters.
• og:description – This is also similar to your html meta description tag, in which it should describe your content.
• og:type – The type of your object, e.g., “website, blog, article”. Depending on the type you specify, other properties may also be required. The global types are grouped into verticals. Each vertical has its own namespace. The og:type values for a namespace are always prefixed with the namespace and then a period. Here is the full list that you can pick from when defining your content type
• og:image – An image URL which should represent your object within the graph. You may include multiple og:image tags to associate multiple images with your page. (Note: image sizes must be no more than 5MB in size.)
• og:url – The canonical URL of your object that will be used as its permanent ID in the graph, e.g., “https://www.narga.net/understanding-social-media-tags-open-graph-protocol/”.

As an example, the following is a link that I’m sharing on the Facebook

And the HTML markup is

  
...






    ...
  
  ...

Facebook Graph

As the figure above, Facebook tries to read the code on your page, but they aren’t always able to pull your images. Facebook’s Open Graph protocol allows for web developers to turn their websites into Facebook “graph” objects. The information is set via custom META tags on the source page.
All of Facebook’s Open Graph META tags are prefixed with og:, then continued with more specific the specific property to be set. The data relative to the property set goes within the content attribute:

Like default Open Graph META tags above, Facebook extended the basic meta data to add a required field to connect your webpage with Facebook:

• fb:app_id – A Facebook Platform application ID that administers this page. If you have a fan page on Facebook and you want to get more data in Facebook Insights, then you have to use this tag.

 

• og:site_name – A human-readable name for your site, e.g., “NARGA”.

 

 

• Activities

 

 

• Businesses

 

 

• Groups

 

 

• Locations

 

 

Visit the Facebook Open Graph page to retrieve more details about each META tag and its intended information. Using this simple META tag strategy, you can tell Facebook what images, text, and more to use when sharing your webpage. Next, we’ll talking about Twitter Card

Twitter Card

Don’t like Facebook, Twitter use their own Open Graph Meta with property set is twitter:{tagName} instead og:{tagName} and you must set permission for Twitterbot in robot.txt to allow it crawing your website. There are 3 card types that can be attached to Tweets, each of which has a beautiful consumption experience built for Twitter’s web and mobile clients:

• summary: The default card, which includes a title, description, thumbnail image, and Twitter account attribution.

 

• photo: A Tweet sized photo card.

 

 

• player: A Tweet sized video/audio/media player card

 

 

Before adding Twitter Card into your website HTMl, you must place this line first to the HEAD section of your page:

Only one card per-page is supported. All cards support a few basic properties:

• twitter:card – This meta tag describes the type of content you are sharing. You have 3 options with Twitter: photo (for images), player (for videos), and summary (for everything else). If you don’t define your card, Twitter will default to summary.
• twitter:url – Canonical URL of the card content like og:url
• twitter:title – The title of your content as it should appear in the card.
• twitter:description – A description of the content in a maximum of 200 characters. This is similar to a meta description tag you would use for Google, but don’t stuff it with keywords…
• twitter:image – A URL to the image representing the content.

Each card has built-in content attribution, which surfaces appropriate Twitter accounts for the content as specified by you. Configure your card attribution using the following properties: (Remember these properties is optional)

• twitter:site – @username for the website used in the card footer.
• twitter:site:id – Same as twitter:site, but the website’s Twitter user ID instead. Note that user ids never change, while @usernames can be changed by the user.
• twitter:creator – @username for the content creator / author.
• twitter:creator:id – Same as twitter:creator, but the Twitter user’s ID.

After you apply the Twitter Card meta tags to your site, don’t forget apply to Twitter’s Card program. Once you get accepted, URLs from your website will be shown in the card format.