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.
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.
<meta property="og:url" content="https://www.elexoft.com/blogs/meet-digital-branding-digital-brand-company/" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Digital Marketing" />
<meta property="og:description" content="Best Tips for Digital Marketing" />
<meta property="og:image" content="https://www.elexoft.com/blogs/meet-digital-branding-digital-brand-company.jpg" />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
- Pub
- 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?
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.
<meta name="twitter:title" content="Software house">
<meta name="twitter:description" content="Top software house in Pakistan">
<meta name="https://www.elexoft.com/assets/images/03.jpg">
<meta name="twitter:card" content="summary_large_image">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:
<meta name = ”twitter: description” content = »Learn about the new Marketing strategy that can make your company grow with less investment than with traditional marketing”>
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.
