How to use Facebook Open Graph and Twitter Cards

Neil Patel is one of our greatest digital marketing gurus. We always look at his articles as a source of inspiration and we’ve learned a lot from him. We had the opportunity to chat with Patel on his recent visit to India.

Neil Patel is one of our greatest gurus of digital marketing.

We always look at his articles as a source of inspiration and we’ve learned a lot from him. We had the opportunity to chat with Patel on his recent visit to India.

We are honored! The translation you can check now.

(And if you still don’t follow Neil Patel, we strongly suggest you take a look at his website and Facebook fan page. Believe us: he can teach you a lot about digital marketing.)

Meta tags for social networks: how to use Facebook Open Graph and Twitter Cards

Do you use title tags and description meta tags? If so, you certainly know the importance of these two points when it comes to SEO.

But did you know that social media traffic is also significantly affected by the correct use of these resources?

What today’s post will cover is that there are different rules for using tags and meta tags for Facebook, Twitter and other search engines, and our focus here is to make you understand how to increase traffic on social networks through some tips regarding these particularities called Twitter Cards and Facebook Open Graph.

Facebook Open Graph

When you try to share an image on Facebook, does an image usually appear with the related information, or just the title and description?

You probably have already encountered this type of situation. The fact is that when Open Graph is not used (or is not properly configured) the second situation should occur, frustrating its objectives, as Facebook is unable to “pull” its images.

Know that it’s not just about embellishing your post.

Those who understand the minimum of digital marketing know that when an image is added to your message, traffic increases considerably. We are talking about something greater than 150%!

Now that you are convinced that you should use Open Graph, here are tips on how to set it up on your website or blog so that your Facebook posts are always with images that give much more relevance to your content:

If you use WordPress, just install the Open Graph Protocol plugin and everything will be practically ready.

Now if you’re not using WordPress, you’ll need to generate meta tags for each page on your site manually. To facilitate the instructions below, for your understanding, we will use the article “50 great Facebook marketing tips” as a practical example.

Og: title

Og: title is where you enter the title of your content.

Think of it as being similar to your conventional HTML title tag that you use for Google. When creating your og: title, keep the number of characters less than 95 characters.

For example: < meta property = ”og: title” content = ” 50 great Facebook marketing tips “ />

Og: type

Here we’re talking about where you describe the type of content you’re sharing.

Is it a video, image, blog post, etc.? Here is the complete list, which you can choose from when defining the content-type:


  • activity
  • sport


  • Pub
  • company
  • coffee
  • Hotel
  • restaurant


  • cause
  • sports_league
  • sports_team


  • band
  • government
  • non_profit
  • school
  • university


  • actor
  • athlete
  • author
  • director
  • musician
  • politician
  • public_figure


  • city
  • country
  • landmark
  • state_province

Products and entertainment

  • album
  • book
  • drink
  • food
  • game
  • product
  • song
  • movie
  • tv_show


  • blog
  • Web site
  • article

For example: <meta property = ”og: type” content = ” article “ />

Og: Description

This is also similar to your HTML meta description because it is used to describe your content. Don’t mind the strength of the keyword here in this case.

Instead, think of a compelling description that will have the potential to generate more clicks. You have up to 297 characters for this tag.

For example: <meta property = ”og: description” content = ” Do you want to know how to be successful with Facebook ads and which posts increase interaction with fans? Check out our tips! “/>

Og: image

Remember that we mentioned that posts with images were able to increase Facebook traffic by about 150%?

This is possible because using Open Graph, you have the guarantee that Facebook showed an image every time someone shared a URL of your website. The results are even obvious, considering that the post will be much more attractive.

By using an og: image tag, you will ensure that an image is always close to the content you are sharing. This way it stands out from all other status updates based on texts on its timeline.

Before we get to the merit of how you can use this tag, you need to know that Facebook has some prerequisites for posting images. An image must be at least 50px by 50px, but preferably larger than 200px by 200px. In addition, the image cannot be larger than 5 MB in size.

For example:

<meta property = ”og: image” content = ” “ />https : // bloggercage . with / wp – content / uploads / 2014 / 09 / zuckerberg – 620 × 316 . png

Og: url

In this tag, you must put the URL of the page you are sharing. This tag may seem irrelevant, but it is very important, because sometimes you will have more than one URL for the same content, and using this tag you will ensure that all shares will only access one URL, which should help your Facebook Edgerank.

For example:

<meta property = ”og: url” content = ” / # /” />https : // bloggercage. com / blog / tips – marketing – no – facebook

Og: site_name

This tag tells Facebook what your site name is. You don’t really need this tag, but there’s no harm in including it.

For example: <meta property = ”og: site_name” content = ” Content Marketing “ />

FB: admins

If you have a Facebook fan page and want to get more data through Facebook Insights, then you need to use this tag. It “tells” Facebook that you are the site owner and connects your Facebook to your page.

For example: <meta property = ”fb: admins” content = ” webloggercage ″ />

Now that you have your Facebook Open Graph meta tags properly configured and know more about them, let’s move on to Twitter Cards.

Twitter Cards

Have you ever had the opportunity to see Twitter posts that have images, and with a full description of the related post inside a well-organized box?

Well, these detailed tweets only appear when you use Twitter Cards. Wouldn’t it be great to always be able to count on it? I would definitely highlight you in a crowd of posts.

Here is the formula for how you can leverage your reach with Twitter Cards:

If you do the SEO work for the Yoast plugin for WordPress, just follow the steps on that link. In other cases, follow the steps below:

Twitter: cards

This meta tag describes the type of content you are sharing. You have three options with Twitter, different from the ones we present for Facebook: photo (for images), the player (for videos) and Summary (for everything else).

If you do not define your card, Twitter will use the Summary pattern for all posts.

For example: <meta name = ”twitter: card” content = ” summary “>

Twitter: url

This is the page you are sharing on Twitter. Like Facebook in the case of URLs, Twitter does this because you can have the same content on your site multiple times.

This will ensure that a URL can cover all tweets. Otherwise, they will be divided into several URLs, which is not good for search engines.

For example:

<meta name = ”twitter: url” content = ” /”>http : // https : // bloggercage. com / blog / tips – marketing – no – facebook

Twitter: title

As with your Facebook Open Graph title, this should not be stuffed with keywords, this is definitely not the case.

Making it attractive so people want to click on it is the main goal here. Again, like on Facebook, you will need to limit the number of characters to 70.

For example: <meta name = ”twitter: title” content = ” 50 great Facebook marketing tips “>

Description: Twitter

This is similar to a description meta tag that you would use for Google. But again, there is no need to fill it with keywords. Your goal here should be to create an attractive phrase that guides and encourages people to click on the link that leads to your website. Remember that here your description is limited to 200 characters.

For example: <meta name = ”twitter: description” content = ” Do you want to know how to be successful with Facebook ads and what are the posts that increase interaction with fans? Check out our tips! “>

Twitter: image

To make your tweet stand out, we already know that you need an image, don’t we?

In the case of Twitter, your images must be less than 1 MB in file size, and cannot be smaller than 60px by 60px. Another detail is that images larger than 120px by 120px will be automatically resized.

For example:

<meta name = ”twitter: image” content = ” “>https : // bloggercage. with / wp – content / uploads / 2014 / 09 / zuckerberg – 620 × 316 . png

After applying the Twitter Cards meta tags to your website, you need to apply them to the Twitter Card Program. Once you are accepted, your website’s URLs will be shown in card format, as described in the first topic on the subject.


Meta tags are not just for search engines. Social media sites are also taking advantage of them, just as you would optimize them for Google and similar rankings and open rates.

So, get to work on Facebook and Twitter too, and see your reach grow considerably after that. At least, that’s what we hope for.

Scroll to Top