Open Graph tags, Twitter cards and SEO: the ultimate guide to optimizing them for your SEO
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!".
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?
Add the following line in your HTML page:
html xmlns: og = "http://ogp.me/ns#"
Add the meta tags with the property and content attributes in the "head" tag, such as the example below:
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.
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.
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.
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.
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.
Source: social buffer
The Photo card
Tweet illustrated with an image that does not use any characters.
The Gallery card
Format showing the user a selection of photos taken from the website link with the tweet.
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”.
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.
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.
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.
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.
Finally, make your website content visible on social media with the open graph tag and highlight your content to bring traffic.