What are Open Graph meta tags? When you share a post from your website on a social media platform like Facebook or Twitter, the post will usually display a preview of an image, a website title, and a description. But do you know how that information gets to your social media post? Probably not, because you’ve never had to think about it. The answer is Open Graph meta tags.
Table of Contents
Open Graph Meta Tags
First of all, let’s define meta tags. Meta tags are small segments of text that describe a web page’s content to search engines.
Open Graph is a protocol used by web developers to determine what content will be shown when a website is posted on a social media platform. If your website doesn’t use these open graph meta tags, then it’s possible a photo unrelated to your content or an inaccurate description will be displayed on the social media platform.
However, if you use Open Graph meta tags, you can choose what people see when they share your website on social media. If you pick a relevant image, title, and content, you are much more likely to get clicks on your website. This is why open graph meta tagging is important.
Open Graph Meta Tags You Should Use
The following is a full list of the Open Graph meta tags are the most common. These are the ones you should use for your website.
og:site_name
This is the name of your website. It will be shown under the title of the web page.
og:title
This is the title of your individual web pages. Try to make these simple, memorable, and something that a viewer will want to click on.
og:description
This meta tag should include a short description of your website. Make sure it is a maximum of two sentences. You want to write something, short, snappy, and to the point that will make the reader click through to your site.
og:type
This tag determines the type of content shown. There are several options for the type of content you can display, including songs, videos, and more.
og:image
This is where you put the URL for the image you want to display on social media. The image must be a minimum size of 50 by 50 pixels and needs to be in either the JPEG, GIF, or PNG format.
og:url
This tag is there you put the URL that you want your content to link to.
Open Graph Meta Tag Integration
Next, you will need to integrate your Open Graph meta tags to your website. The easiest way to do this is by adding them to the container of your page’s HTML files. This might sound difficult if you are not a professional web developer.
But, if you use WordPress or another website builder, there is an easier way. For example, Facebook offers an official plugin you can attach to your website. Also, e-commerce software like Zen Cart and Shopify also allow Open Graph integration.
However, if you do know HTML and don’t have millions of pages to set up, then you can simply add the meta tags to your web pages in the HTML files.
Steps for Integrating Open Graph Meta Tags to Your Web Pages
Open your HTML container:
<html>
<head>
<meta property=”og:title” content=”My Website” />
…
</head>
</html>
Then, replace the property and content in quotes with your relevant meta tags. You can add as many as necessary.
However, some social media platforms utilize their own social media tags. For example, Twitter uses Twitter Cards. But, if Twitter doesn’t find any Twitter Card tags, it will default to Open Graph. That’s because Open Graph is a universally accepted protocol and works with any website. That’s why it is so important to utilize for your own website.
If you choose not to use Open Graph meta tags, you risk losing out on lots of clicks to your website. These give you the opportunity to choose what information people will see about your website when it is shared on social media networks. If you don’t use these tags, you could even lose out on business.
If you need help with your website’s Open Graph meta tags, SEO Design Chicago can help. Our team of website developers can help make sure your website looks professional on every kind of social media platform.
Contact Us Today!