What are Open Graph meta tags? How should they be implemented? And why are they important?
Meta tags (standard, non-open graph meta tags) are HTML code snippets that tell search engines (like Google) what kind of information you want them to show in their search results.
But, Open Graph meta tags are entirely different. These are meta tags that lay the groundwork for social networks to interpret your content in a meaningful way.
In short, OG tags help you create a much more pleasing appearance for your posts on your social networks besides just sharing text.
There are a few things that SEO pros need to know about best practices and things that are necessary for the successful implementation of Open Graph meta tags, so let’s dive in.
What is Open Graph?
Open Graph allows webmasters to add information about themselves and their sites to Facebook, Twitter, LinkedIn and other social media platforms. This helps people find relevant content quickly on those networks, and “beautifies” the display of your post content on these networks.
The idea behind Open Graph came from the fact that Facebook had already built a way for people to see what type of content was popular on the network. A lot of publishers were publishing stories on Facebook without really thinking about how their audience could interact with that story, or even whether they wanted to interact with that story. So Facebook found a way to make it easier for publishers to dress up their posts with fabulous-looking graphics and other media.
Facebook’s solution was called Open Graph, which allowed publishers to create a single page that would contain all of this rich data about their site. The publisher could then share that page with their followers so that a nice graphical presentation of the article showed up on the social network, rather than just drab and boring text.
This is why you’ll often see articles shared on Facebook as an Open Graph link. It gives you a chance to get more clicks back to your website as well.
Why Do You Need Open Graph Tags?
The open graph protocol allows publishers to add metadata about themselves and their content to web pages. These include things like author information, publication date, category, and even thumbnail images. Publishers use these to make sure that when someone shares their webpage, they have access to the same information.
If you’ve ever added something to Facebook or Twitter, chances are you used the open graph protocol. If you haven’t, don’t worry — we’ll explain what it does later. For now, let’s look at why you’d want to add some open graph tags to your site.
How Does Open Graph Help Your Website?
When someone shares a web page on Facebook, they’re actually sharing a URL. That means that if you want to track who’s sharing your content, you need to know the URL. But most URLs aren’t very descriptive. They usually just say “www.example.com/article-title”.
That makes it hard to figure out exactly who shared your content. You can try looking through Google Analytics to see who visited your site, but that won’t always work because many visitors will come from search engines. And if you do manage to identify them, you still won’t know what they did after they left your site.
That’s where open graph comes in. When someone shares a web page on Facebook, they’re sharing a URL that includes a bunch of extra information. That includes things like:
Author Name – Your name, or whoever wrote the article.
Article Title – The title of the article.
Article Description – An optional description of the article.
Image src – Where the image for the article came from.
Article Category – What kind of article it is (e.g., news, blog).
Date Published – The date the article was published.
Type of Published Media – This tells Facebook what type of article it is.
So when someone shares an article on Facebook, when you have open graph tags implemented correctly, they’re providing additional detail that enhances the appearance of your article snippet on Facebook. This is where the power of using open graph tags comes in.
Why SEO Pros Need to Care About Open Graph Tags
The Open Graph protocol allows you to tag every piece of content you publish with metadata that helps people find it across different platforms. This includes things like images, videos, audio files, posts, events, and even webpages. You can use these tags to make sure the same information appears consistently across channels.
By adding OG tags to each post, you can help consumers easily discover your content and engage with your brand.
Open Graph Meta Tag Examples
Here are some examples of how you could use open graph tags.
News Articles
You could add an og:type”article” tag to any page that contains articles. This would tell Facebook that this is an article.
Blog Posts
You could add an open graph tag to any page that’s part of a blog. This would tell Facebook to display your blog posts as news stories.
Videos
You could add an open graph video tag to any video that you upload to YouTube. This would tell Facebook and others that this is a video.
Events
You could add an event tag to any event that you create. This would tell Facebook, Google+, and other social networks that this is an event.
Web Pages
This would tell Facebook which pages link to yours.
These are just a few of many examples of open graph tags that you can add to a page that will help improve its appearance on social networks immensely.
What Happens If Your Site Doesn’t Have Any Open Graph Tags?
Most social networks by default will do their best to create a preview of your content, even if you haven’t added open graph tags. But there are times where you might want to skip this step. Here are some situations where it makes sense to avoid adding open graph tags:
- You already have a preview image on your site.
- Your site doesn’t use images.
- You’re posting about something that isn’t newsworthy.
- You’re posting a link to another site.
- You’re sharing an article that doesn’t have a headline.
- You’re sharing something that doesn’t have a caption.
- You’re sharing someone else’s photo.
- You’re sharing your own photos.
- You’re sharing multiple posts at once.
If you’re not sure whether or not you need to add open graph tags, here are some questions to ask yourself:
- Does my website contain articles? If so, does it include links to other websites? Does it include images?
- Do I share anything on Facebook? Do I share anything on Twitter?
- Is my website optimized for search engines?
- How often am I updating my website?
- Are there any updates coming soon?
- Can I update my website without having to wait for approval from a publisher?
- Can I get permission to use someone else’s content?
- Will my audience be interested in what I’m sharing?
- Should I be worried about missing out on traffic?
If you answered yes to all of these questions, then you probably should consider adding open graph tags.
Why Should You Use Open Graph Tags?
Adding open graph tags to your website gives visitors more options when they follow your site on social media. For example, if you’ve created a new post on your blog, the open graph tags will show up in the “More From…” section of Facebook. This means that people who visit your site through Facebook will see your latest content right away.
Adding open graph tags also helps search engines understand your content better. Search engines like Google and Bing use open graph tags to determine what type of content you’re publishing. They’ll know that you’re writing about a specific topic, and they’ll index your content accordingly.
Open Graph Tags vs. Schema Markup
Schema markup is similar to open graph tags but has different purposes. It’s used to describe the structure of your webpages and how they relate to each other. The most common schema markup tags are:
- Used to identify the title of the webpage.
- Used to provide a short description of the page.
- Used to indicate which URL is the canonical version of the page.
- Used to specify the author of the page.
The main difference between schema markup and open graph tags is that schema markup is only visible to search engines. Open graph tags are visible to both search engines and social networks.
Starting with the basics of open graph
You can use Open Graph tags to control what appears on Facebook and other social networks.
The four basic open graph tags—og:title, og type, og image and og url—are required for every single web page you serve. If you want your social media posts to display properly on Facebook, Twitter, LinkedIn, etc., you must include these four basic tags. They’re easy to add, though, and there’s no reason why anyone shouldn’t do it. In fact, doing so could help improve the overall display quality of your tweets.
You’ll find that the benefits outweigh the effort involved. Here are a few basic open graph tags and what they do:
og:title
Specify a title for the post.
og:description
Use this tag to describe the contents of the link.
og:image
Use this tag to specify the URL of an image to include in the post.
og:type
Set the type of object that this link points to.
og:site_name
Name of the site where the link goes.
og:locale
Choose language for the posts.
Open Graph Tags for Twitter: Twitter Cards
Twitter introduced a feature called Twitter Cards in 2012. These are small images that show up in every tweet. They contain metadata about the tweet and make it easy for people to share the content on social networks like Facebook and Instagram. This is a way to include what are known as “enhanced tweets” with a new type of “card” that displays posts enhanced with Twitter card markup for the social media crowd.
The problem with implementing these tags is that they look very similar to Open Graph Protocol (OGP) tags. There are even cases where the same image appears twice because someone implemented both types of tags.
To avoid such duplicates, Twitter rolled out a new feature called “cards.” These allow you to add extra information to your tweet.
Cards work just like the old Twitter buttons that allowed you to do things like retweet, favorite, etc. However, unlike those buttons, they don’t require an action from the user.
Instead, they automatically display themselves once a user opens the tweet.
twitter:card
Twitter:cards allow you to add nice display snippets to your web page links that show up in Twitter’s news feed.
The idea behind it is simple: make it easier for people to follow you. Instead of adding a link to your homepage, you can simply add a picture of what you want to show off.
You can use the image itself as a link to another webpage, or just add text around it. You can also add multiple pictures to one tweet, making it easy to show off a variety of information about yourself.
twitter:title
This particular twitter:card attribute is basically just a title for the related content.
twitter:description
The twitter:description meta tag allows you to add a short summary of what the post is about. This is great for adding a little extra information to your tweet without making it too long.
twitter:url
The twitter:url tag helps to explicitly state what the canonical URL for the page is. Use it to set the canonical URL for the social media post you want to show up in search results.
twitter:image
Twitter’s image tag lets you include up to three images in your tweets. Like most social media platforms, Twitter uses the “card” format for its posts. Cards are usually used for sharing short videos or photos. However, there are different types of cards. A regular card includes a photo, while a video card features a video embedded in the post. There are also different sizes for each type of card, ranging from small to big.
You can choose whether you want to use a single or multiple images. For example, if you want to show off a product, you might want to use a single image. On the other hand, if you are trying to promote something like a concert, you might want to feature multiple images.
In addition to including images, you can also add a caption to your tweet. In fact, adding captions to your images makes your tweets look even better.
There are two ways to do this. One way is to simply add a few words underneath the image. Another method is to add the text within the image itself. To do this, you select the “text inside the image” box under the “type” dropdown menu.
If you don’t know what type of image you want to use, you can always upload a photo directly into your account. Just click on the camera icon in the upper left corner of the screen and take a picture. Then, just wait for the preview window to pop up and click on the “Share” button to send it out.
Another important thing to remember is that you cannot put too many images in your tweet. Twitter limits the number of images to three per tweet. So, if you try to cram 20 pictures into one tweet, you won’t be able to.
The maximum height for the image is 1080 pixels. And finally, make sure that the image you upload meets Twitter’s guidelines. The site recommends that you keep the dimensions of your images between 200 x 150 to 300 x 250 pixels. Also, make sure that the file size is less than 1 MB.
Important Notes
It’s important to note here that OG tags and Twitter cards are not the same as standard SEO meta tags. These are often confused by the inexperienced.
Don’t let the name fool you: just because they are in a similar location does not mean they serve the same purpose.
Always make sure that you are using OG: tags and Twitter: cards for their intended purpose on social networks.
And, always make sure that you are using meta tags as well. If you are using OG: tags and Twitter: cards instead of meta tags, Google is likely not going to pick up on these as actual meta tags, because they don’t match the syntax of what Google needs.
Dress Up Your Social Media Posts Using Facebook’s Open Graph and Twitter Cards
Creating a classy social media presence isn’t too difficult. You just need to have the right open graph tags and twitter cards in place.
That way, when you share your posts, you’re not just sharing text. You’re sharing meaningful content that is dressed up with snazzy graphics and promotional media.
As a result, you create an air of authority and expertise because you’re sharing your content in a relevant way, while also maintaining a graphically pleasing aesthetic.
By doing this, you, too, can be on the train to eventually attaining virality.
When do you plan on dressing up your social media posts?
