Although we’re all familiar with Facebook, very few of us understand all of the tools that drive traffic to your organization’s social media accounts. One of these tools is called Facebook Open Graph.
What is Facebook OpenGraph?
Originally, Facebook launched its initial website tool, Facebook Connect. Facebook Connect includes the Facebook icons that you see on websites that allow you to interact with a specific post without fully opening up Facebook. Additionally, it allows users to sign into a multitude of websites using their Facebook account.
Two years after the launch of Facebook Connect, they launched OpenGraph. OpenGraph is an API, or application programming interface, that allows you to drop a variety of Facebook’s site tools to your own website. Additionally, this allows users to interact with your business’ website without having to navigate any further than their social media account.
The plugins that Facebook has included in this infrastructure are:
- Like Button
- Activity Feed
- Recommendations
- Like Box
- Login Button
- Facepile
- Comments
- Live Stream
How do I add Facebook OpenGraph to my webpage?
Facebook OpenGraph allows users that share your site to see a preview of your web content directly on their pages. You can utilize the Yoast SEO plugin to add these tags with the following steps:
1. Log in to your WordPress website.
2. Select SEO from the menu on the left-hand side.
3. Click on “Social.”
4. Select the tab labeled “Facebook.”
5. Enable the “Add Open Graph Meta Data” switch.
6. Click “Save Changes.”
Why does OpenGraph matter?
We know that Tweets that feature an image generate one and a half times more retweets than their text-based counterparts. Strategic image placement can lead to increased engagement from your social media followers, which gets you additional marketing exposure.
Additionally, users are more likely to see shared content with optimized OG tags, which will drive an enhanced amount of traffic to your website. There are three reasons that these optimized posts will drive more users to your website:
- They make your content pop, visually.
- They give readers a quick way to skim your content.
- They help Facebook crawl your material, which increases your search visibility.
Overall, this means that people are more likely to interact with your content and Facebook is more likely to return your content to new users through searches.
How do I use code to manage my OpenGraph?
There are a variety of OpenGraph tags that you can use to manage the features you are looking to optimize through your work with OpenGraph. Although the most important tags govern your title, URL, type, content, and images, you can create tags for the audio, locale, site name, and video as well. These tags can define the language of your posts, display whether your content is part of a broader network, add additional audio or video files to your post, or link to a specific Facebook application.
og:title
This tag will place a title on your content. Ideally, this title is between sixty and ninety characters, but not longer than one hundred. This is important to adhere to because if you exceed the character count, your work will be automatically shortened.
This portion of your code will look like:
<meta property=”og:title” content=”What You Need to Know about OpenGraph”/>
og:url
This tag is useful if you’d like your social posts to navigate back to one, consistent webpage. This tag will list the URL that your links will automatically direct users to.
This portion of your code will look like:
<meta property=”og:url” content=”https://www.lhgraphics.com”/>
og:type
This tag outlines the type of content you are sharing. You can share articles, websites, books, movies, and more. If you do not specify your content, Facebook will assume that you are sharing a website by default.
This portion of your code will look like:
<meta property=”og:type” content=”website”/>
og:description
This tag controls how the link will be described. This particular piece of code does not impact your SEO, but it is a great opportunity to engage your audience. You’ll stick to about two hundred characters for this description.
This portion of your code will look like:
<meta property=”og:type” content=”LHGraphics is the best, most wonderful design company.”/>
og:image
Pictures are critical to getting the attention of users on social media. If you do not deliberately tag your post, any picture can be auto-selected from your website. According to Neil Patel, “The most frequently recommended resolution for an OG image is 1200 pixels x 627 pixels (1.91/1 ratio). At this size, your thumbnail will be big and stand out from the crowd. Just don’t exceed the 5MB size limit.”
This portion of your code will look like:
<meta property=”og:image” content=”http://lhgraphics.com/bestimageever.jpg”/>
How do I debug Facebook OpenGraph tags?
Conveniently, Facebook has created its own tool, called Sharing Debugger. This program can be used to “see the information that is used when your website content is shared on Facebook, Messenger, and other places.”
When you use this tool, it will return any errors in your tags, along with checking your images and description. Additionally, it will refresh your cache to allow for repeat adjustments free of negative repercussions.
Let LightHouse Graphics Manage Your OpenGraph Work
Through our monthly managed service, LightHouse Graphics is proud to create social media posts that are aesthetically pleasing and strategically written to appeal to your audience. There is no need to stress over your social media presence when you can pass it on to our expert team to ensure it is managed with care and finesse.
