Meta Tags for social networks: How to use Facebook Open Graph and Twitter Cards

Social Media Tags: How to use Graph and Cards. Do you use Meta tags like title tags and Meta description tags? Of course, you use them because you know that it helps you improve your position in search engines.

But did you know that Meta tags affect your traffic on social media? Sure, there are Google’s authorship tags, but what about Facebook and Twitter? In fact, each of these networks has its own Meta tags that can help you improve the social traffic you are receiving.

These are called Facebook Open Graph and Twitter Cards. Here’s how you can take advantage of both:

Facebook Open Graph

When you share an image on Facebook, what does it look like?

Well, it doesn’t always look like this. Facebook tries to read the code on your page, but it doesn’t always load the images.

Facebook Open Graph

If you do not use Open Graph tags when you share a URL of your site on Facebook, it is possible that only the text of the article (title, website, and description) will be seen, as a post without life and that does not stand out among the others on Facebook.

This is how Quick Sprout used to look before it implemented Open Graph tags on the website.

After having implemented the Open Graph tags, I was able to increase my traffic on Facebook by 174%, simply because I now have images in every Quick Sprout status update.

Now that you are convinced, you should also use Open Graph. This is how you can install it on your website.

If you use WordPress, just install this plugin and you’re pretty much done.

If you don’t use WordPress, you will need Meta tags for each page on your website manually. To make it easier to understand, we will use the article “Google Ranking Factors: 10 Tools That Will Help you” as an example.

Og: title

Here you put the title of your content. Think of this as something similar to your normal Html title tag that the search engine uses. When creating your og: title, keep the number of characters close to 95 characters.

Example: <kills property = »og: title» content = »Google ranking factors: 10 tools that will help you» />

Og: type

This is where you describe what kind of content you are sharing. Is it a short video, a photo, a blog post, etc? This is the list you can choose from when defining the type of your content:

Activities

activity

Sport

Business

company

coffee

hotel

restaurant

Groups

cause

sports_liga

sports_team

Organizations

band

government

nonprofit

school

University

People

actor

athlete

author

director

musician

politician

public figure

Places

city

country

landmark

state providence

Products and Entertainment

album

book

drink

food

game

product

song

movie

tv_show

Websites

Blog

website

Article

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. You should not care if it is a good keyword, however, you should include an attractive description that will give you more clicks. You have up to 156 characters for this tag.

Example: <meta property = ”og: description” content = ”Do you want to know how to appear on the first page of Google results when doing a search for your market? These 10 tools will help you”/>

Og: image

Remember that posts with images were able to increase traffic on Facebook by 174%? It’s because I used the Open Graph to make sure Facebook displayed the image every time the Quick Sprout URL was shared.

By using an og: image tag, you will ensure that the image is displayed with the content you are sharing. In this way, it stands out from all text-based content in status updates on Facebook.

Before I talk about how to use the tag, I’ll tell you about the Facebook requirements. An image has to be at least 5o x 50 px, but preferably larger than 200 x 200 px. The image cannot be more than 5 MB.

Example: https://www.elexoft.com/blogs/meet-digital-branding-digital-brand-company.jpg » / >

Og: URL

In this tag, you should put the URL of the page you are sharing. This tag may seem irrelevant, but it is important because sometimes you can have more than one URL for the same content. Using this tag, you will ensure that whenever it is shared they go to one URL instead of several URLs, which should help your Facebook Edgerank.

Example: https://www.elexoft.com/blogs/meet-digital-branding-digital-brand-company/ >

Og: site name

This tag tells Facebook the name of your website. You don’t really need this tag, but it doesn’t hurt if you include it.

Example: <meta property = ”og: url” content ” https://www.elexoft.com/blogs/meet-digital-branding-digital-brand-company/ >

Fb: Admins

If you have a Facebook page and want more information on Facebook Insights, then you should use this tag. You tell Facebook that you are the owner of the profile, and it connects your Facebook page to your website.

Example: <meta property =”fb: admins” content =”marketing” />

Now that you have your Facebook Open Graph meta tags, let’s see about Twitter Cards.

Twitter Cards

Have you seen a tweet like this?

Twitter Cards

Well, these tweets only look like this when you use Twitter Cards. Wouldn’t you like to have this for your site? It will help you stand out.

Here’s how to create Twitter Cards:

Twitter: card

This Meta tag describes the type of content you are sharing. You have three options with Twitter: photo (for images), the player (for videos), summary (for everything else), and summary with a large image (it has the same characteristics as the card summary, but offers a little more space for an image and description). If you don’t define your card, Twitter will identify it as a summary type by default.

Example: <meta name = ”twitter: card” content = ”summary with large image”>

Twitter: URL

Similar to how Facebook asks for a URL, Twitter also does this since you may have the same piece of content on your site more than once. This will ensure that all tweets are for the same URL. Otherwise, your tweets will be divided into multiple URLs.

Example: <meta name = »twitter: url» contnet = »https://www.elexoft.com/blogs/meet-digital-branding-digital-brand-company/ “>

Twitter: title

Similar to your Facebook Open Graph title, this shouldn’t be cluttered with keywords. Make it attractive for users to click. Again, like on Facebook, you better stick to 70 characters.

Example: <meta name = ”twitter: title” content = ”Content Marketing: how it can boost your business”>

Twitter: description

This is similar to the meta description tag you use for Google. But don’t abuse keywords. Your goal is to write an engaging sentence that invites people to click. The description is limited to 200 characters.

Example:

Twitter: image

For your Tweet to stand out you need an image. Your images must be less than 1 MB, but they cannot be smaller than 60 x 60 pixels. Images larger than 120 x 120 pixels will be adjusted.

Example: <meta name = »twitter: image» https://www.elexoft.com/blogs/meet-digital-branding-digital-brand-company.jpg » >

Conclusion

Meta tags aren’t just for search engines. Social networks are also taking them into account. Just how you optimize your meta tags for better Google rankings and click-through rates, you also need to do the same for Facebook and Twitter.

What do you think of Open Graph and Twitter Cards? I got an increase in traffic with Open Graph, but I would like to know what you think.