What is the main purpose of having content on a blog or a website? Having your post read and shared and thereby grow your community. Social media is actually the best way to share your content. But do you know how to optimize your outreach potential?
What is Open Graph?
Open Graph is a protocol that allows web pages to be represented as items in a social graph. Open Graph was launched in 2010 by Facebook but is now held by the Open Web Fondation. The purpose was to offer an easier integration between Facebook and other websites by displaying rich graph objects with the same features as Facebook objects. It was allowing a certain degree of control over the information that was shared.
Major social media platforms now also offer that tag even if Twitter has developed its own one for Twitter Cards (but still accept Open Graph if necessary). To do so, the information is thus sent via Open Graph meta tags in the <head> part of the website’s code.
What is the purpose of using Open Graph?
Website traffic is nowadays in great part due to social shares. It is thus necessary to master this tag, since it can really make the difference on your click-through rate.
The classic example is you share a link on Facebook and the thumbnail is missing or the wrong image is appearing. That is pretty annoying right? Open Graph is here to offer a better user experience and optimize your sharings.
Does Open Graph have an impact on your SEO?
Officially, Open Graph does not have a direct impact on your on-page SEO and it just seems to be here to optimize your social links.
Otherwise, social medias like Facebook have taken such an important place over the years that search engines can not ignore Open Graph’ data in their algorithm anymore. It would be tricky to exactly describe that impact, but it certainly exists. It is however sure that Google analyses Open Graph tags and may favorise pages in Google+.
Even if a webmaster should first focus on description and title tag, he also should give a strong interest inserting Open Graph in his pages, especially if they are shared a lot on social media.
How to insert an Open Graph ?
To place an Open Graph you just have to:
- add “http://ogp.me/ns#” at the html tag
- add in the <head> tag the meta tags with the property and content attribute
- specify the 4 tags : og:title, og:type, og:url, og:image
Other tags are also existing if your page has rich objects like videos.
Main CMS are supporting that option and offer plugins to create Open Graph like WordPress SEO by Yoast.
The main Open Graph tags
Mandatory Open Graph tags
og:title
That is the title of your page for the Open Graph. There is no specific recommendations but you should respect the 65 characters if you do not want your title to be truncated. It actually works the same as the meta title tag and if Facebook does not find the og:title, it will just use your title tag. Remember that is must be appealing to optimize your click-through rate.
example: <meta property=”og:title” content=”Your appealing title here” />
og:type
This tag specifies your page type (website, article, video, music..) and describes the main type of subject on your page. The list of possibilities is very long so you can check it out here.
example : <meta property=”og:type” content=”website” />
og:image
This is your URL image that will be display in the Open Graph. It is very useful as you can choose which thumbnails will be displayed and avoid unrelated images. It moreover helps to increase your conversion rate. Indeed, picture marketing is really something you should take in account since a great picture worths 1,000 words.
Usually, a good resolution for an og image is 1200 pixels x 627 pixels for a 5MB size.
If you have installed the right plugin in your CMS, the right image will automatically be displayed.
example : <meta property=”og:image” content=”http://www.yourwebsite.com/image-name.jpg” />
og:url
That is the canonical URL of your page. Most of the time that is just the URL displayed on your page but it can be helpful if there is different dynamic URLs linked to the same page.
example : <meta property=”og:url” content=”http://www.yourwebsite.com” />
og:description
That is a snippet of your page that should contain between 150 and 200 characters (Facebook can display up to 300 characters) and that describe your page content. It works the same as the meta description tag but it will not affect your SEO so do not lost time to optimize your keywords but just try to write something compelling.
example : <meta property=”og:description” content=”Your great description that perfectly describe what you are talking about.” />
The not mandatory
og:video
If you have a video in your page this is where you should place its URL
og:locale
This specifies your language page
og:site_name
This is the name of your website
Fb:app_id
Link a Facebook application (for example Facebook Comments) with the object
To help you out, Facebook has developed a tool called Open Graph Object Debugger with two great features :
- it draws a clear summary of the possible errors or you can simply check how your sharings will look like.
- it clears the Facebook cache. It is very helpful if you see a mistake in your thumbnail for example. Even if you have change it in your OG tags, it will remain the same ; it is because of the cache. That tool will refresh the cache after any adjustments. So keep that in mind !
You can also use Yakaferci that will analyse for free your Open Graph tags.
