Companies that develop online marketing campaigns put a lot of effort into creating high-quality content. But, not many of them implement open graph (OG) to ensure that their content looks great when sharing on social networks.
Businesses that are still working on getting to the first page of Google may have to rely on additional sources to help funnel traffic to their site. Social media marketing is a great alternative of course! But, if you’re preparing your post and notice that it’s not showing the image you want, it may not have the impact you’re hoping for.
Open graph is a set of rules or protocols that allows social media networks to better understand your website, so implementing these on each page is crucial for success. That said, you also need to know how open graph tags work to make sure that your content appears exactly how you want it to.
At Fannit, our team has been developing SEO and social media strategies for clients for almost a decade, so we know the importance of having your content show up properly on your posts. In this article, we’ll define OG, go over some of the different tags you can employ, and tell you everything you need to know about implementing open graph on your website.
- More helpful reading: https://www.fannit.com/blog/what-is-social-media/
What Are Open Graph Tags?
The open graph protocol was introduced by Facebook back in 2010 as a way to help the social network understand the elements on a page.
To do so, the company develops a set of meta tags that define the contents on the page in a way that allows the seamless transmission of information.
Simply put, Facebook open graph is a set of protocols that allows your website to send information to the social network in an understandable way.
So, instead of featuring scrambled snippets and pixelated images, your posts will contain the right content and deliver information in an organized way. When your posts are displayed the right way, they’re more likely to attract user attention and boost your company’s credibility.
There are many visible benefits of having open graph on our website. Some of the main advantages of OG include:
Improve Social Media Posts
The first and most obvious benefit of OG is that it can help you create great posts. If the image on the post is blurry or the text appears scrambled, social users are less likely to look at or interact with your content.
By employing open graph meta tags, website managers have more control over the way their content is displayed.
Companies can choose which picture is featured on social posts, ensure that it’s the right size, and verify that all other elements show up in an organized way. This will give your social content a professional appearance and allow users to focus on your content rather than formatting issues.
Suitable for Different Platforms
While Facebook was the platform responsible for developing open graph, the technology is employed by other leading social networks.
This includes LinkedIn, Pinterest, and even Twitter, which uses open graph whenever a website doesn’t have its trademark meta tags.
So, even though you may hear the terms Facebook meta tags or LinkedIn open graph, keep in mind that these properties are suitable for all major platforms.
Regardless of the network, social meta tags allow a higher degree of control in terms of how the information is sent from your website.
And, open graph is not only useful for posting, but it’s also suitable for likes, comments, and other common social actions.
Growing Collection of Tag Types to Choose From
Consumer patterns are always changing and websites have to adjust their content accordingly.
Likewise, Facebook has introduced a variety of opengraph types including basic, image, video, and 3D tags.
Basic tags can be applied to all content types and they allow you to choose the URL, title, description, and image that’s displayed.
Plus, there’s also a tag that links Facebook Insights to your page. Moreover, the basic tags help you define your website category, which can be set as a regular page, video, or article.
Video tags can be used if the main emphasis on your page is a video. Or, it can also come in handy if you simply want the video to appear when users share your content.
The video tags can help you determine if your video plays in the news feed, its format, and details such as its height as well as width in pixels.
Image tags allow you to define similar features but for your images. And, these tags should be used if there’s more than one image on your website because you get to set the piece of media you want to show on social networks.
Lastly, there’s also a set of 3D tags for websites that are spearheading the innovative content movement, which you can check out here.
Open Graph Tags on Social Networks
Learning a bit of information about OG tags goes a long way because it can improve the response you get from your social media content. Plus, even though it doesn’t directly affect your SEO, getting more engaged traffic can boost your quality metrics and help increase your ranking over time.
At the time of writing, Facebook has developed more than 20 different meta property OG tags.
We won’t go over all of them in this article, but we’ll highlight the most important ones from a general perspective. Remember, there is no exact formula for success, so you need to look at the content on each page and determine which property tags can have the most beneficial effect.
Our picks for the most important social meta tags include:
Title
As you’ve probably guessed already, meta property og:title content is used to define the title on the page. It works similarly to traditional meta tags on search engines.
If Facebook crawlers don’t find your page, they actually use the metadata that’s sent to search engines instead, but this doesn’t maximize the page you have available.
Meta titles for Google can be around 65 characters before being truncated and they are presented in a list format next to other results.
On Facebook, the titles appear in eye-catching bold letters and they tend to capture attention because they are separated from the rest of the content. And, since Facebook allows you to show around 90 characters before cutting off your titles, so you have a lot more space to add meta property og:title content.
If you want to visualize it, your open graph tag should look like this:
<meta property=”og:title” content=”youtitlehere” />
URL
It’s normal to have more than one URL for the same piece of content.
Whatever the reason may be, you need to choose a canonical URL, which tells Facebook which one of these versions your social traffic should be sent to. In other words, it basically helps social networks determine the main URL from the pages that should be treated as duplicates.
The piece of code you want to implement in your website is as follows:
<meta property=”og:url” content=”http://www.domain.com/exactURL” />
Content Type
The content type tags help you define the element you want to describe.
We’ve discussed the four main categories, but you can also choose to define more specific elements like articles, blogs, books, games, geographical locations, businesses, personalities, and more.
The code snippet should look like:
<meta property=”og:type” content=”typeofcontenthere” />
Description
Like the title, the meta property og:description content tag is similar to traditional meta descriptions found on search engine results.
But, on social networks, this meta content appears below the featured image. Plus, this social tag doesn’t affect any sort of ranking, so it should be informative and enticing rather than keyword-rich.
The best part about this tag is the amount of space it gives you. You can type around 200 letters depending on the length of each individual word.
In some cases, Facebook can display as many as 300 characters, but we suggest you play it safe and avoid getting your content truncated.
If you want to define the description that appears on social posts, your snippet should look like this:
<meta property=”og:description” content=”Yourinterestingmetadescriptiongoeshere.” />
Image
Having attractive images on your post has been proven to increase engagement metrics.
But, websites that haven’t implemented meta property og:image content properly may end up displaying a random banner when sharing their content on social media.
The OG image tags are extremely helpful if you have more than one graphic element on a specific page because you can choose which picture appears when your article is shared on social networks.
Although many marketers and web managers fall under the impression that the meta property og:image content has to feature an image that appears on the page being shared, this is not the case.
You can use this to your advantage and include images that will help you stand out in your social posts even if they don’t appear on that specific page or article.
In the vast majority of cases, you’ll want to select a large image because Facebook and other networks will create a small thumbnail and attach it to the post.
The larger your image, the clearer the thumbnail will be. We recommend using images that are 1200 x 625 pixels.
But, your thumbnail should be alright as long as your graphics are larger than 400 x 209 pixels and no more than 5MN in size.
Here’s an example of the HTML tag image meta property:
<meta property=”og:image” content=”http://www.yourbusinesswebsite.com/image-name.format” />
Language
OG meta properties also allow you to set the language and set geographical tags in case you want to target specific areas.
The default language of this OG tag is US English, but you can change it according to the audience and content on your page.
This is what the OG locale snipper looks like for US English:
<meta property=”og:locale” content=”en_GB” />
Site Name
Each article, blog post, and piece of content you post will have a title, but this isn’t necessarily the name of your blog or website.
The site name meta property can help you define the name of your blog, website, business, or platform and ensure that users see it in your posts.
And, you can even use a separator character to make sure your audience differentiates between the name of the article and the name of your company website.
Your finished site name snippet should look similar to this:
<meta property=”og:site_name” content=”nameofyourplatform” />
Audio or Video
Automatically playing an audio file when users visit your website is a no-go, but this doesn’t mean you should abandon this feature completely.
Music streaming websites and other platforms may want to show sound files right on social network feeds.
Fortunately, by having the right audio OG tags, websites can help ensure that these files are readily available for users directly on their feeds. Your audio OG snippet should look something like:
<meta property=”og:audio” content=”https://examplewebsite.com/soundfile.format” />
The video tags serve a similar purpose, but for rich media files.
If you want to share a page that features a video and want to emphasize this element, the OG video tags can help ensure that your video is secure, has the right size, and comes in the adequate format.
Keep in mind that there are different tags depending if you want to change the height and width of the video on social media.
With this in mind, the most basic form of video meta property tags should look like:
<meta property=”og:video” content=”https://examplewebsite.com/video/file.format” />
Article Author
In most cases, readers have an easier time engaging with an article if they can see who it was written by.
By using the article author OG tag, you can name one or more writers in your social media posts. This is especially helpful if you’ve developed content in collaboration with an expert or if you have team members that are regarded as leaders in your industry.
Keep in mind that the author tag also allows you to specify the person or people who wrote a specific book. For example, ecommerce platforms that sell books can use this tag to give users a bit more context whenever they see a novel-related post.
You’ll have the option of including the name of the author or a link to a specific profile page (on Facebook or other platforms).
There are some possible variations, but your snippet may look something like this:
<meta property=”article:author” content=’https://www.profilewebsite.com/profileurl />
Advanced App Linking
Websites that use Facebook Insights as part of their tracking system also need to implement advanced app linking open graphic tags in their site.
This will allow the social network’s tracker to analyze traffic on the website and give you a breakdown of the performance on each page.
Every platform has a unique app ID, which should be incldued in your tag like this:
<meta property=”fb:app_id” content=”yourappID”/>
How to Implement Open Graph Tags
Now that we’ve gone over specific meta examples of the main types of open graph snippets, let’s take a look at implementing OG into your pages.
You’ll need to carve out some time and prepare the images as well as the tags you’ll use before implementing them.
This will help you stay organized, reduce the amount of time it takes you, and reduce the chances of making costly mistakes.
In order to implement OG tags into your site, you have to:
Optimize Image Size
Images are one of the most useful tools for marketers because consumers are immediately attracted to creative graphic elements.
But, as we mentioned before, your images should be at least 400 x 209 pixels in size if you want to avoid small thumbnails.
Remember, choosing images that are closer to 1600 x 625 pixels will produce thumbnails that are relatively large and eye-catching.
In addition to the size of your graphic elements, pay attention to your audience and make sure to choose an image that has a high chance of engagement.
Remember, you don’t have to use an image that appears on your page, so you can get creative and choose a picture based on performance.
Choose the Right Tags for Your Site
Finding social meta tag examples is relatively easy, but choosing the best ones for your website is not always straightforward.
If you include 3D meta properties, there are dozens of tags you can implement, so you need to find the combination that gives you the highest chances of success.
Furthermore, consider the social network you’re using and make sure that the tags are designed for these platforms.
Facebook is the original creator of open graph, so standard implementation should work just fine.
That said, Facebook audiences are a lot more engaged and dislike direct sales messages, so the content in each tag should highlight value without being too direct.
Twitter users tend to be more pragmatic and they understand that companies use this social media for promotional purposes, so your content can be more direct. And, even though Twitter has its own set of meta tags, it also relies on open graph when these are not present on a website.
Some web managers prefer to include Twitter meta tags anyways because they are very similar and help reduce the chances of any errors.
You can read more about Twitter cards and how to implement them with open graph here.
LinkedIn lists its own meta tags, but these are the same as Facebook open graph snippets. However, LinkedIn only recognizes basic tags such as title, image, property, and URL, so it will not detect more advanced markup even if it’s on your site.
Edit the Metadata to Match Your Website
Once you’ve collected all the open graph snippets you need, simply edit them to match your website and double check that they’re accurate.
Instead of going through every line manually, you can use Facebook’s Sharing Debugger.
The Sharing Debugger tells you if there are any errors and in your markup and what you need to do to fix them. And, you can check multiple URLs at the same time, which allows you to do batch revisions rather than having to do one-by-one.
Copy the Code to the Head Section of Your Page
If you manage your website code directly, you’ll need to find the head section of the page you’re implementing open graph on and paste the snippets directly on there.
You can also request assistance from your web manager or technology team, but you need to ensure the code is placed in the right area.
Companies and website owners using WordPress only have to download an add-on or extension that takes care of the OG code, but these need to come from reputable sources to prevent issues later on.
If It’s Not Your First Time Posting the Page, Run the Open Graph Debugger
If you’ve never shared the page you’re working on, you can skip this and move on to the last step.
However, if you’re previously shared the page on Facebook or another social network, you need to run the Sharing Debugger.
The reason for this is that social networks create caches of your post and these are not updated unless you run the debugging solution.
Review Your Posts
Once you’ve completed all the steps above, it’s time for you to review your post.
Simply access Facebook or the social network you’re sharing on, prepare the post, and make sure the images as well as snippets appear exactly how you want them to.
More helpful reading: social SEO guide
Benefits of Open Graph
Open graph can help ensure that your content looks great, but its benefits go way beyond improving aesthetics.
Here are some of the benefits of implementing OG into your site:
Control the Information that’s Displayed to the Audience
The main benefit of OG is that it allows you to alter the information that appears on a social post when sharing your pages.
You can use the different tags to change titles, improve the way your content is displayed, and increase your chances of attracting engaged users.
Synchronize Facebook Posts and Content on Your Site
In addition to ensuring that images, audio files, and video appear properly, OG synchronizes the content on your website and your Facebook posts.
If used properly, you can synchronize comments, likes, and shares so that they appear on your page as well as on the posts you share.
Group and Location Targeting
Advanced OG experts can use this technology to improve group and location targeting, which means that certain pieces of information are only displayed to users in a specific area.
List of Open Graph Elements is Regularly Updated
Digital marketing has become the new golden standard because it can be adjusted to ever-changing consumer patterns and OG is no exception.
The list of graphic elements available is regularly updated to include new media types and other variables, which allow you to create more engaging posts.
Learn More About Implementing Open Graph on Your Website
Implementing OG may take some time, but it can help improve the performance of your social profiles and drive more traffic to your website.
To learn more about implementing open graph and other advantaged digital marketing techniques, contact Fannit Digital Marketing Company and our team will be glad to help.
More helpful reading:
