How to add OpenGraph on your site

11 Dec 2014
| Last update: 20 Mar 2015

Do you use meta-tags?

Meta-tags are an essential part of promoting your content on the web, because they can help you boost your search engine rankings and affect the social media traffic on your site. There are Google’s authorship tags, and Facebook and Twitter have their own social media ones, which increase the amount of traffic you are getting. They are called Facebook OpenGraph and Twitter Cards.

OpenGraph Meta-tags. Introduced by Facebook

They were introduced by Facebook in 2010. Basically, what they do is to allow other websites to become rich “graph” objects and to function as other FB objects. In this way you can share them on FB. So, you control how information travels from a website to FB when you share a page(like it, etc.). The information is sent via OpenGraph meta tags in the <head> part of the website’s code.

head html

How Meta-Tags look like?

Facebook HTML Tags You have a meta tag for almost anything:

1. Title:

og:title

This serves the purpose of the meta title tag in your code. It should be appealing, like a good post title. If you don’t provide one, Facebook will use your meta title instead. You should try to keep it between 60 and 90 characters. If your title is longer than 100 characters, Facebook will truncate it to only 88!

Wake up with new leads from the content you publish.

 

Example: <meta property=”og:title” content=”Write your title” />

2. Canonical Url:

og:url

Set the canonical URL for the page you want to share. In other words, you define one page that all your shares will go to. If there is more than one URL for the same content, this comes in handy. Note that the URL provided is not shown on Facebook newsfeed, only the domain is visible.

Example: <meta property=”og:url” content=”http://www.yourpost.com” />

3. Type:

og:type

You can describe the kind of object you are sharing: blog post, video, picture, etc. Examples: Web based:

  • website
  • article
  • blog

Entertainment:

  • book
  • game
  • movie
  • food

You can see the full list of types here.

This meta tag is very important for the “Like” button of your page, especially if you have a real-life object: movie, book, etc., because it determines if your content will appear in a user’s interest section of their profile in the event they give you a “Like”.

Whenever you don’t define a type, Facebook will read it as “website” by default. Example: <meta property=”og:type” content=”website” />

 

4. Description:

og:description

This meta data descriptor is very similar to the meta description tag in HTML. Here you describe your content, but instead of it showing on a search engine results page, it shows below the link title on Facebook.

Unlike a regular meta description tag, it won’t affect your SEO. (So, don’t spend too much time figuring out how to sneak in keywords.) However, it’s a good idea to make it compelling because you want people to click on it. Use about 200 characters.

Example: <meta property=”og:description” content=”Insert your meta description here. Make it interesting and appealing.” />

5. Image:

og:image

Your content becomes more appealing when you join it with an image. This meta tag ensures that a specific thumbnail will be shown when your page is shared. It is helpful to influence click-behavior.

If you are not careful with the og:image, FB may show something irrelevant or an unwanted banner from the page, or nothing at all. The most frequently recommended resolution for an OG image is 1200 pixels x 627 pixels (1.91/1 ratio).

At this size, your thumbnail will be big and stand out from the crowd. Just don’t exceed the 5MB size limit.

Example: <meta property=”og:image” content=”http://www.yourdomain.com/image-name.jpg” />

So, this is what OpenGraph meta-tags look like and how you can add them to your site. Hope you’ve found this useful!

 

Follow me

Ligia Mangra

Content Writer at Squirrly
A passionate writer. I love seeing a full moon and I like to rock 'n roll in life. Can't wait till my first novel gets published. Thumbs up, it'll be a fantasy horror!
Follow me

Comments

One Comment

  • A

    December 12, 2014 at 8:51 AM

    Everytime I type in or while the post is in draft mode; when I switch from HTML to Text mode and switch over again to check the “tags” they aren’t there. I still don’t get this “meta” tagging. Frustrating.