If you have a website, it’s important to make sure your content stands out when it’s being shared across social media channels. Open graph will ensure it is error free and looks as attractive as possible. Read on to find out how it works.
What is Open Graph?
Open Graph is an internet protocol created by Facebook to standardize the use of metadata within a web page to best represent its content. It provides a variety of details including the run time of a video on the page or page title. These characteristics will come together to tell you what the page is all about.
Why Do I Need Open Graph?
Website media is meant to be shared, often on social media. It’s best to share it via an eye-catching preview. Open graph will allow you to put your best foot forward when your content is being shared.
If you don’t have open graph, the social media channel will do it’s best to create a nice-looking preview for you, but the platform often falls short. This will result in a post that looks dull and lifeless or may not even show the desired content. This means fewer people will become engaged and you’ll get less website visitors from your share.
What are the Tags of Open Graph?
There are four main tags involved in open graphs. Each should be unique in accordance with the page they represent. So, your homepage should be different from your blog article pages and each blog article page should be unique from one another.
The tags are as follows:
- Og:title: This is the title of your page. It will typically be the same as your page tag unless you want it to be different.
- Og type: This is the type of website you have.
- Og image: This is the image you will use to represent your website. It should be a high-resolution image that will look attractive when shared on social media.
- Og: URL: This is the URL of the page you are working with.
Open Graph Type Tags
Most of the tags listed above are relatively easy to understand, but og:type may be throwing some of you for a loop.
The best way to tag your page in terms of type is to think of the vertical it contains. So, if the vertical is a video, the tag may be ‘video’. If it’s an image, the tag may be ‘image’. If your page does not contain a vertical, it may just tag it ‘website’.
No matter what direction you take it in, it’s important that each page of your site is tagged uniquely.
Other Tags that Can Be Used
The tags mentioned above are the four most basic, but they are not the only ones that can be used. Here are some others you can integrate.
- Og:description: The description of your page can be the same as your tag but you can make it unique if you would like.
- Og: locale: This refers to the location of your business. The format is language_TERRITORY, so if you are in the United States, your locale may be en_US.
- Og:sitename: This is the name of your website. It differs from the name of the page.
- Og:video: You can use this tag to link to a video that supports your content.
Tags for Specific Social Media Platforms
Most social media networks will adhere to Open Graph standards, but a few have their own systems. Twitter is a perfect example. The Twitter platform allows you to use twitter:card, a tag that you can use when sharing your content on the site.
The platform also has its own card variety which includes:
- Summary
- Summary_large_image
- App
- Player
These allow you to choose how your posts show up in the Twitter feed. So if you use summary_large_image, it will show your content with large, high resolution images, as long as you use the og:image tag.
Image in Open Graph
While images will usually show up well using the og:image tag, you may need to use alternate tags. These may be effective if you are experiencing problems. They include og:image:url, og:image:secure_url, og:Image:width, and og:image:height.
You will also have to post in accordance with the platform’s image requirements. If you are having trouble, try using a variety of tags and working with the platform’s tools to see if you can arrive at a solution.
Open Graph for Facebook
When it comes to sharing content, Facebook is a terrific platform to choose. It has tons of visitors, and it allows for easy link sharing.
In this section, we will include some tips for using Open Graph on Facebook.
- Og:title: When using a title for Facebook integration, it best to use one that’s between 60 and 90 characters. If you go past 88, the platform will truncate the data.
- Og:URL: The URL tag will help Facebook identify what you are sharing. It will not show the URL in the feed, only the domain.
- Og:type: You can use a variety of types to explain your content to Facebook including the type of business you are, the city and state you are located in, and your content as far as whether it’s a blog, homepage, etc. This will determine if your content appears in a user’s feed if they like the post. If you don’t specify your type, Facebook will categorize it as a webpage.
- Og:description: FB will include a description of up to 300 words along with your content. However, it’s best to limit it to 200 words to keep it short and sweet.
- Og:image: If you do not use CMS, you will need to update your image tag every time you upload content. If you have CMS, the system will do it for you. For best results, use an image that’s 1200 x 627 pixels and don’t exceed 5MB on size. If you go under this pixel count, your image will look much less impressive.
Facebook also offers a feature called Sharing Debugger. It checks for errors and shows you a preview of what your link will look like. It also clears you cache after adjustments are made to ensure your link appears the way you want it to appear.
Open Graph for Twitter
Twitter is another site conducive to content sharing. And because not many people use open Ggaph with Twitter, you can make your company stand out by exploring this option.
Here are some ways you can use the various open graph tags to your advantage on the Twitter platform.
- Twitter:card: This has a similar function to og:type. It allows you to choose between summary, photo, video, product, app, gallery, and large photo summary. If it is not set, it will view your tag as summary by default.
- Twitter:title: Similar to og:title, this text should not use the same language you use in your tweet. Using different language and sending the same message will reinforce what you are trying to say.
- Twitter:description: This will describe the page you are sharing. Twitter won’t honor keywords so don’t focus too much on these. Just think about creating a caption that fits the content you are sharing. Twitter will not allow you to go beyond 200 words on this.
- Twitter:url: This will set a URL for the content you are sharing.
- Twitter:image: The Twitter image is used to set the picture that goes with your tweet. You can choose a smaller or larger image. It should have a resolution of at least 280 x 150 px., and it should be at least 1 MB in size. You can add text to the image to boost the message.
You will need to request approval from Twitter before your image will post with all the required tags. Fortunately, this is relatively easy to do. You can use the Card Validator for this task. In addition to allowing you to post, the tool will also give you the option to check your links before you post to ensure everything is working properly.
How to Use Open Graph Tags
OG tags belong to the head part of a page’s HTML. If you don’t know how to manage code, you will need to ask your web developer for assistance. But with the knowledge in this article, you’ll be able to save him or her valuable time and yourself a lot of money.
If you are using WordPress, you can simply download one of the plugins to implement OG tags. There are a variety to choose from. While many experts prefer the Yoast option, Facebook plugins and other tools are available.
OG tags may seem confusing, but once you gain a better understanding, you’ll be able to use them effectively. When you get the feature working for you, your business will stand out and attract more visitors. How will you be integrating it in your campaigns?
If you have questions or would like to get started, please give us a call at (312) 834-7787 or visit our website to request a free quote and consultation.