Home/SEO Guide/On-page/Open Graph tags, Twitter cards and SEO: the ultimate guide to optimizing them for your SEO

Understanding the functioning of Open Graph tags, Twitter Cards, and their stake in your SEO has become essential. This will allow you to be impactful when sharing your content on social networks and will be a plus for your SEO: we explain all this to you in this guide "what is it, how to implement it, and how to combine open-graph tags and twitter cards!".

Contents

Open Graph tags in a nutshell!

The Open Graph protocol definition

The protocol that will allow you to share content from a web page on social media is the “Open Graph”. Open Graph data is a set of tags used to provide structured and rich information about the content of a page from a website. In other words, when a user clicks on a share button, the information entered by default will be the one inserted.

How to set up open graph tags?

facebook open graph seo tag

  1. Add the following line in your HTML page: html xmlns: og = "http://ogp.me/ns#"
    
    
  2. Add the meta tags with the property and content attributes in the "head" tag, such as the example below: 

tag open graph privateaser seo smartkeyword

  • The og:title tag = corresponds to the title of your page, less than 65 characters, the meta tag: it is very similar to your classic Title tag!
  • The og:description tag = short description of the page, less than 300 characters: it is very similar to your classic meta-description tag!
  • The og:url = "canonical" URL tag, the one that indexes your page. It is very likely that it matches the URL of your web page >> so try to optimize your url!
  • The og:image tag = URL of the image which represents your page. 
  • The og:site_name tag = global name of your website.

Be careful: not all tags are essential, but some are! You must absolutely specify the 4 tags: og:title, og:type, og:url, og:image.

You have the option of extracting these pieces of information from our Smartkeyword solution.

open graph seo tag smartkeyword

Which purpose for Open Graph tags?

The impact of the Open Graph protocol is indirectly found at the search engine level. Originally, Open Graph tags were intended for use on social media. Generating and increasing the click rate on a website via social sharing turns out to have a strong business interest. In addition, the Rankbrain, 3rd criterion of relevance for Google that has the click rate as its influence index, the Open Graph protocol then indirectly becomes a significant tool in an SEO strategy.

Summary of the 5 most important Open Graph tags

The og:title tag

that matches the title of your page.

The og:description tag

which corresponds to a short description of your page.

The og:url tag

which corresponds to the url of your web page.

The og:image tag

which represents the image of your page which will be shared on social media.

The og:site_name tag

which corresponds to the url of your site.

The Twitter Card in a nutshell!

What is the Twitter card?

A Twitter card is a technical optimization that enriches your tweets with media data from your website. When someone shares a link, the posted tweet will be accompanied by information in a multimedia format previously chosen by the author.

twitter card seo smartkeyword

How to set up the Twitter Card?

Simply go to the Twitter developer support platform. Then, go to the “Validator tool” which will help you generate the code to integrate on your website, according to the Twitter card format you want to generate whether for the desktop or mobile format.

Enter all the requested information, then you will be able to preview the result and obtain the code to integrate on your website, then you just have to validate. To check if everything is working correctly, from a meta data point of view, enter the URL in question.

If the website has the meta tags and if the URL is correct, you will be taken to a page where you have the option to submit basic information and a request for approval.

twitter card generator seo smartkeyword

Source: Yousemii

The 8 existing formats of twitter cards 

The Summary card

Default format incorporating elements of your web page such as title, description, preview and Twitter mention.

summary card twitter card seo smartkeyword

Source: social buffer

Summary card with Large image

This format will be accompanied by a large image containing the same elements as the Summary card.

summary card with Large image twitter card seo smartkeyword

Source: social buffer

The Photo card

Tweet illustrated with an image that does not use any characters.

photo card twitter card seo smartkeyword

Source: adparlor

The Gallery card

Format showing the user a selection of photos taken from the website link with the tweet.

gallery card twitter card seo smartkeyword

Source: VPDM

The Player card

Only concerns multimedia content (video, audio and slides) to be directly “con: presenting a selection of photos via the web link with the tweet”.

player card twitter card seo smartkeyword

Source: social buffer

The App card

Format suitable for iOS and Android mobile applications. The data displayed is the name of the app, the name of the store, the price, the description and the reviews seen from the Twitter preview.

App Card Twitter card seo smartkeyword

Source: social buffer

The Product card

Suitable for e-commerce, the ascending data concerns the product in question with an image, the price, the list of sizes, the availability.

product card twitter card seo smartkeyword

Source: VPDM

The Lead generation card

Format only available in advertising format, it allows the integration of a sharing call-to-action, also facilitating the pre-recording of information such as mention, name and email address.

lead generation card twitter card seo smartkeyword

Source: VPDM

The purpose of the Twitter Card

Twitter Cards make content more attractive because it automatically illustrates your web links that you share. Each card has a built-in content assignment, which displays the appropriate Twitter accounts for the content specified by you. Users will be able to track and view the profiles of assigned accounts directly from the card. This makes it easier for the user to read by automatically illustrating shared web links without inputting a number of characters on the tweet. A tweet with metadata increases visibility and therefore virality among followers.

Combine Open Graph data with Twitter Cards

Twitter card tags are similar to Open Graph tags and are based on the same conventions as the Open Graph protocol.

When we use the Open Graph protocol to describe data on a page, we have the possibility of easily generating a Twitter card without duplicating the tags and the data.

When the Twitter card processor looks for tags on a page, it checks and secures the Twitter-specific property first, and if missing, reverts to the Open Graph supported property. Allowing it to be set on the page independently and lessen the amount of duplicate markup needed to describe content and experience.

To remember: in the code you must complete the words "twitter: card, twitter: site, and twitter: creator" with your information for perfect optimization.

tag Open Graph twitter card seo privateaser smartkeyword

Conclusion

Finally, make your website content visible on social media with the open graph tag and highlight your content to bring traffic.

   Article written by Louis Chevant

Further reading

The complete Guide to On-page SEO

All the rules to optimise each page element at best.

Download for free