Facebook and Twitter Open Graph Meta Tag Types
Marketers create tons of content. Yes, content is king, but that king is powerless without followers.
So, what’s the primary thing that involves mind once you want to succeed in a broader audience together with your awesome new blog post?
Sharing on social media, of course. the huge audiences of web sites like Facebook and Twitter make them a number of the simplest sharing, but does one skills to optimize that outreach potential?
Open graph meta tags were designed to try to to just that. But what are they, why do they matter, and — most significantly — how does one use them?
What Is Open Graph and Why Was It Created?
Facebook introduced Open Graph in 2010 to market integration between Facebook and other websites by allowing posts to become rich objects with an equivalent functionality as other Facebook objects.
Put simply, it helps optimize Facebook posts by providing more control over how information travels from a third-party website to Facebook when a page is shared (or liked, etc.).
To make this possible, information is shipped via Open Graph meta tags within the a part of the website’s code.
head html for open graph meta tags
Now, other social media sites are also taking advantage of social meta tags.
Several other major platforms, including Twitter and LinkedIn, recognize Open Graph tags. Twitter actually has its own meta tags for Twitter Cards, but if Twitter robots cannot find any, Twitter uses Open Graph tags instead.
Why Marketers Should Care About Open Graph
Social media sites are the main drivers of most of the web’s traffic. Consequently, the power to harness the facility of social meta tags may be a vital skill for today’s marketers.
Most importantly: open graph meta tags can have a huge impact on conversions and click-through rates.
Have you ever shared a link on Facebook only to seek out that the thumbnail was missing, or there was a completely different picture than you expected?
Knowing just a touch about Open Graph tags can assist you tackle these problems and improve your social media marketing.
Adding Open Graph tags to your website won’t directly affect your on-page SEO, but it’ll influence the performance of your links on social media, in order that means it’s worth looking into. Let’s take a glance at the foremost important meta tags for Facebook and the way to optimize them for better sharing.
Understanding Facebook Open Graph Meta Tags
Facebook has several open graph meta tag types. Let’s cover the various types, then I’ll cover the way to use them.
Facebook HTML Tags open graph meta tags guide
og:title
As you would possibly guess, this is often how you define your content’s title. It serves an identical purpose because the traditional meta title tag in your code. In fact, if Facebook doesn’t find the og:title append your page, it uses the meta title instead.
Keep in mind that the text shown on a Facebook feed is in bold and very eye-catching. It must be compelling, a bit like an honest post title.
There is no limit on the amount of characters, but it’s best to remain between 60 and 90. If your title is longer than 100 characters, Facebook will truncate it to only 88!
Example:
og:url
This is how you set the canonical URL for the page you’re sharing. What this suggests is that you simply define one page that each one your shares will attend. It’s useful if you happen to possess quite one URL for an equivalent content (for example, using parameters). Important note: URL provided isn’t shown on Facebook newsfeed, only domain is visible.
Example:
og:type
This is how you describe the type of object you’re sharing: blog post, video, picture, or whatever. The list to settle on from is long. Here are some examples:
Web based:
website
article
blog
Entertainment:
book
game
movie
food
Place:
city
country
People:
actor
author
politician
Business:
company
hotel
restaurant
You can see the complete list of types here.
This tag is vital if your page features a “Like” button and represents a real-life object (like a book or a movie). It determines if your content will appear during a user’s interest section of her profile within the event she “Likes” it.
In most cases, you’ll use the “website” value, since what you’re sharing may be a link to an internet site. In fact, if you don’t define a kind, Facebook will read it as “website” by default.
Example:
og:description
This meta data descriptor is extremely almost like the meta description tag in HTML. this is often where you describe your content, but rather than it showing on an enquiry engine results page, it shows below the link title on Facebook.
Unlike a daily meta description tag, it won’t affect your SEO. (So, don’t spend an excessive amount of time deciding the way to sneak in keywords.) However, it’s an honest idea to form it compelling because you would like people to click thereon.
You are not limited to a personality count, but it’s best to use around 200 letters. In some cases, counting on a link/title/domain, Facebook can display up to 300 characters, but I suggest treating anything above 200 as something extra.
Example:
is sweet, use it.” />
og:image
This is the foremost interesting Open Graph tag for several marketers because an image always helps content stand out. this is often how you make sure that a specific thumbnail are going to be shown when your page is shared. It are often very helpful for your conversion rates.
Make sure you set the og:image you select, otherwise Facebook will show something stupid like an unwanted ad banner scraped from the page, or nothing in the least (as below). We definitely don’t want that!
FB no thumbnail open graph meta tags
It’s important to recollect that if your page is static and you don’t use any kind of content management system (CMS) (like WordPress), you would like to vary the og:image manually for every of your pages.
If your website is controlled with a CMS and you installed the relevant plugin, the og:image tags are assigned automatically for every page. search for the list of plugins further down.
The most frequently recommended resolution for an OG image is 1200 pixels x 627 pixels (1.91/1 ratio). At this size, your thumbnail are going to be big and stand out from the gang. Just don’t exceed the 5MB size limit.
FB my full open graph meta tag example
If you employ a picture that’s smaller than 400 pixels x 209 pixels, it’ll render as a way smaller thumbnail. It’s nowhere nearly as eye-catching.
FB little thumbnail for open graph meta tags
Keep in mind that the image you employ as an Open Graph image are often different from what you’ve got on your page.
Why wouldn’t you leverage that chance to face out even more?
For example, if your title is sweet, but the image you’re using isn’t very exciting (not an infographic or a good-looking person, etc.), think about using a picture with an honest line or two of copy instead (see example below).
One thing you would like to recollect if you are doing this: lace your text, or the foremost significant a part of it, within the middle of the image. This matters because Facebook trims the edges of thumbnails.
FB thumbnail centred with text open graph meta tag
Example:
Advanced Facebook Open Graph Tags
The Open Graph tags above are those you actually got to know (og:description not such a lot, but it’s useful). There are other, more advanced, tags you’ll use to supply even more in-depth specifications.
og:locale – defines the language, American English is that the default
og:site_name – if the page (object) you’re sharing is a component of a bigger network
og:audio or og:video – to feature additional audio or video files to your object
fb:app_id – for linking to a Facebook application (e.g., FB Comments) with the thing
Check Your Open Graph Tags
To make life easier, Facebook has created a tool called Sharing Debugger. it’s two very helpful functionalities.
Open Graph Meta Tags Conclusion
The final code for both Facebook and Twitter should look more-or-less like this:
final code screen open graph meta tags conclusion
It might seem a touch confusing, but luckily there are several tools that make the method easier — you don’t got to skills to code.
It’s surprising how few people optimize these tags. It’s worth doing because it helps you stand out and draw more clicks and views, and it can even help improve your SEO —all things that cause more profit.
Have you implemented open graph meta tags? How has it impacted your site?
