Open Graph Meta Tags - What You Need to Know

Do you want people to notice your social media posts?

Every day, over 4 million blog entries are written, therefore it’s critical to share your work on social networking. Open Graph is one of the most important components to reach a wider audience.

Not all folks have known about the importance of Open Graph. What is it anyway? How can it help you get noticed?

What is Open Graph?

“Open Graph meta tags, like meta descriptions and titles, govern how URLs are written when they are shared on social media.”

It is simpler to define page content on social networking sites because of Facebook’s Open Graph project to standardize social information across websites.

These tags provide social networking services with information such as the page’s title, description, and featured image in the head section of a webpage. This process preserves the consistency and authenticity of the information shown.

Why use Open Graph?

Open Graph is supported in various social networks such as:

• Facebook;
• Twitter/X;
• Pinterest;
• Viber;
• Telegram;
• WhatsApp.

According to Google, the protocol improves “Recommended Content Blocks.”

What happens if Open Graph is not used?

Because Facebook is unsure what to display in the preview, it may use any image it finds (it can even take an ad banner or something from your header).

As a result, Facebook is unable to determine which sections of the preview to display.

• Open Graph creates previews for social media-related websites.
• Open Graph tags help individuals locate material in social feeds, which leads to increased site visits.

As visitors scroll down your website’s page, the higher up your material appears, the more attention it receives. It allows users to get a preview before clicking.

Use OG tags to help people locate your material on Facebook and other social media platforms.

OG meta elements are used to create snippets when URLs are shared in private conversations on sites that utilize the protocol.

The significance of Open Graph protocol for your business

This type of interaction is made simple by Facebook’s Open Graph protocol. Open Graph markup is a method of organizing and tracking preview data. It allows you complete control over how your material is displayed on social networks other than your own.

To facilitate integration, rich graph objects were created that share Facebook’s standard set of characteristics. Facebook has control over the flow of information from external sources (or liked, etc.). This information is provided by Open Graph meta tags as they move through a website’s header.

Because many people access a page via social media, Open Graph tags are more vital than ever. The CTR may increase when the search is improved. Open Graph facilitates the process of social media sharing. Open Graph is widely supported across social networking sites. Twitter/X’s Open Graph tags are a good example; Twitter/X supports Open Graph.

What exactly does this mean?

Why bother labeling your server-side content using Open Graph? Is there a potential that the extra tags will improve your website’s performance and attract more visitors? Here are some of the reasons we believe that Open Graph can make a huge difference.

Most prominent social networks utilize open graph tags

If you don’t have the time to learn HTML, you may instead utilize Facebook Open Graph tags. You may use these labels to personalize the names, descriptions, and photos that appear on all of the main social networking sites.

Open Graph tags are indeed for social media

Open Graph was designed to display samples of information within the social network. It organizes information in ways beyond just sharing a webpage.

Feature optimized image

You may use Open Graph tags to specify which picture should appear in your social preview. The default option does not have to be chosen. People are more inclined to click on links to your blog post or website if they look excellent.

It is about social previews, not search previews

Both search engine optimization and social media marketing are crucial, but they have distinct requirements. Open Graph components solved an old SEO issue: the fact that previews of social network postings had unappealing titles and descriptions.

The page title, meta descriptions, and open graph title, description, URL, and picture tags must all be unique for content to be optimized for search engines and social networks.

You have control on your material

Whether you post your material yourself or someone else does, you have complete control over how it will appear on social media.

Even if you personalize each social media post, the majority of your clients will ignore the preview. Visitors who choose to share your material will do so with a well-chosen image, title, and description if your Open Graph tags are as excellent as they can be. This is very important because you have full control over the information that gets spread about your business.

Types of Open Graph tags

Open Graph tags such as og:title, og:image, og:type, and og:url allow social networking platforms to view your information. You must use these critical tags, but you may also use others.

A Facebook screenshot containing connections to the components og:image, og:url, og:title, and og:description.

og:site_name

The og:site_name tag should contain the domain where your content may be found. As a result, it replaces the brand name, which would have been in the meta title (and therefore be disallowed in the og:title tag).

The og:site_name tag should include the name of your site or brand, while the og:title tag should contain the title of your article.

og:site_name Code <meta property="og:site_name" content="Your Site Name" />

Use the same site name tag across your whole website.

og:title

The og:title tag is suggested for setting the page’s title. It’s similar to how meta titles are used in SEO. When using an existing meta title, be sure to keep the og:title field free of any content that is specific to your brand or website.

og:title Code <meta property="og:title" content="Title" />

This tag should appear on any page of your website that a user may like to share on Facebook, Twitter/X, or another social networking site.

Keep the title between 40 and 50 characters long; else, it will be chopped off.

If you want more people to visit your website, the title must do more than simply describe it.

Unlike search engine meta titles, you should not include your domain name or any other information that might be used to identify you.

og:type

Use the og:type tag to specify the type of material being submitted. This informs the social networking site about the type of content you’re sharing, such as a blog post, web page, video, or audio file.

og:type Code <meta property="og:type" content="article" />

Use the article object type for information that requires explanation, such as blog posts.

Add the website type to the website’s other pages.

You must use the correct file format if you wish to transfer a file that contains both text and audio or video. This page contains a list of all Object Categories.

og:locale

The og:locale tag provides information about the language that the material being transferred is authored in. Users of social networking sites should be made aware that content posted on websites can be seen in a number of languages.

og:locale Code <meta property="og:locale" content="en_GB" />

Because Facebook makes the assumption that everything that lacks an og:locale tag is written in American English, if you run a website in the United States that is entirely composed of English material, you are free to disregard this tag (en_US).

If the content you are providing is written in a language other than American English, make sure to use the correct OG tag.

og:url

Simply use the og:url tag to specify where you wish to publish the content.

og:url Code <meta property="og:url" content="https://www.yourdomain.com/title.html" />

This tag must provide the page’s canonical URL.

og:description

The statement that is included in an og:description tag needs to be succinct, uncomplicated, and as engaging as possible in order to encourage readers to visit a website.

You are free to reuse the information as long as it is relevant, due to the fact that this tag is similar to one that is utilized by search engines.

og:description Code <meta property="og:description" content="Your description." />

It would be helpful if you could keep your description between 50 and 100 characters long. Facebook posts should be between two and four words at the most; posts that are longer than four words are more likely to be deleted.

To get the most clicks and attention paid to the material you’re providing, the description you provide should be as detailed and compelling as feasible.

og:image

Give the URL of the image to be used in the social excerpt using the og:image element. Use an image that is both intriguing and directly relevant to the content of the article to increase the likelihood of people clicking through to your website.

This OG element functions similarly to image schema markup, which is utilized by search engines to provide rich results.

og:image Code <meta property="og:image" content="https://yourdomain.com/wp-content/uploads/your-image.png" />

If you want your website’s shareable pages to rank higher in image search engine optimization, use innovative photos that match your branding. Even if a page isn’t likely to be shared frequently, branding it with your logo is a smart idea in case someone shares it in the future.

To avoid seeming pixelated or low-quality, your original artwork should have an aspect ratio of 1.91:1 and a resolution of at least 1200 by 630 pixels.

The og:image:width and og:image:height tags ensure that previously shared images appear properly. Install Yoast on your WordPress site if you haven’t already to get them added automatically. If you haven’t already, here is the code:

<meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" />

Add Open Graph to WordPress

Adding OG tags to WordPress is the easiest, most common, and simplest way to accomplish it with the Yoast SEO plugin. This plugin should already be installed if your site is set up such that search engines can easily locate it.

Update the page or article where Open Graph should be inserted using Yoast SEO’s “social” option.

Fill in the og:image, og:title, and og:description boxes on the Facebook accordion.

Yoast will configure your og:url tag, Twitter/X Card, and image sizes for you. If you don’t instruct Yoast to use a specific picture, it will utilize the main image from the post.

When your website is shared, no image is displayed by default. You may alter this by providing a screenshot of the whole site. This error occurs when an image URL lacks the og:image tag.

On Yoast’s main settings page, you may select the sitewide og:image.

Adding OG tags in your WordPress blog is really easy. You just need to go to:

WordPress Sidebar : Yoast>Social>Facebook.

Toggle the switch, and then save the existing picture. We believe you should select a logo. You can also do the same thing for Twitter/X and Pinterest.

Add Open Graph manually

If you know how to code and aren’t utilizing one of the previous systems, OG tags are simple to install.

You can copy and paste the content below onto your website, but please modify it to suit your needs.

<meta property="og:site_name" content="INSERT SITE NAME" /> <meta property="og:title" content="INSERT TITLE" /> <meta property="og:description" content="INSERT DESCRIPTION" /> <meta property="og:url" content="INSERT URL" /> <meta property="og:type" content="INSERT TYPE" /> <meta property="og:image" content="INSERT IMAGE URL" /> <meta property="og:image:width" content="1280" /> <meta property="og:image:height" content="640" /> <meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="INSERT IMAGE URL" />

Testing your Open Graph meta tags

Let’s assume you’ve understood how to include an Open Graph onto your website.

If your website is properly classified, it should appear excellent when shared on social media. Always test your work before releasing it to the public.

Before you share a URL, double-check that your OG tags are being pulled through and shown appropriately.

These tools may be useful for testing your OG tags:

• Pinterest Rich Pins Validator
• Twitter/X Card Validator
• Facebook Sharing Debugger
• LinkedIn Post Inspector

Simply enter a URL into any of these services to obtain the original meta tags. When you share it, you’ll get a sense of how it will seem to others.

Examine the preview’s image, title, and description before proceeding. You can receive alerts about tags you don’t need, which you can either add or ignore.

If the URL test fails, you should try again with a different tag. Check that each tool is operational by visiting its URL. You can chat about it when it’s finished.

Verdict

It is critical to maintain control over what you share on social media. Traffic and conversion rates increase when rich items are shown in Open Graph. Start from one single blog post. As you have seen the result, it will be much easier to apply Open Graph tags in your next posts in the future.

Frequently asked questions