Open Graph (OG) meta tags are pieces of code that control how URLs are displayed when shared on social media. These tags can tell social platforms what information to display, including the title of the page, description, URL, and associated image. This data creates a rich preview of the page when the URL is shared on a social network like Facebook or Twitter.
The Open Graph protocol was introduced by Facebook in 2010, but has since been used by many other social media platforms. The basic idea is to turn any web page into a rich object in a social graph. In practice, this means making a webpage behave more like an object on Facebook, with a title, description, and thumbnail image.
Here is a rundown of the most important Open Graph meta tags:
1. og:title: This tag is used to set the title of your content as it should be displayed in a social media feed. The title often aligns with the page’s <title> tag, but it’s not mandatory. It should be concise yet descriptive. The og:title is often displayed in bold on social platforms, so it’s one of the first things a user sees.
<meta property=”og:title” content=”Title of the Page”>
2. og:description: The og:description tag is used to provide a brief and appealing summary of the content. It should be concise and compelling. This tag often mirrors the meta description of the page but is tailored to the social media audience.
<meta property=”og:description” content=”Description of the page”>
3. og:url: The og:url tag is the canonical URL of the specific piece of content. If a page can be accessed via multiple URLs, you should pick one primary URL to help consolidate page views. This is the URL you’d like to rank in search results.
<meta property="og:url" content="https://example.com/page-url">
4. og:image: The og:image tag is an important one because it specifies the image URL that should be used when the page is shared on social media. Images are compelling and are a key element of how your content appears on social platforms. They often significantly influence click-through rates. Facebook recommends using images that are at least 1200 x 630 pixels for the best display on high-resolution devices.
<meta property="og:image" content="https://example.com/image.jpg">
5. og:type: The og:type tag specifies the type of content you’re sharing. There are many types like ‘website’ for generic web pages, ‘article’ for news stories or blog posts, ‘music.song’ for songs, ‘video.movie’ for movies, and so on. This helps the social platform understand what kind of content it’s dealing with.
<meta property="og:type" content="website">
6. og:site_name: The og:site_name tag is used to identify your website’s name. It is useful for branding and gives context to the user about the source of the content.
<meta property="og:site_name" content="Website Name">
Additional Open Graph meta tags:
There are also additional Open Graph tags that you can use for specific types of content:
7. og:audio: You can use this tag to specify a URL to an audio file to accompany your content.
8. og:video: The og:video tag can be used to share a video file URL.
9. og:locale: This tag sets the language of your content. You can use this tag if your website targets different languages.
10. og:updated_time: This tag can be used to specify when the content was last updated. It’s a good way to inform social media platforms that the content has been updated.
11. article:author, article:published_time, article:modified_time, article:section, article:tag: These tags can be used for ‘article’ type content. They specify details like the author of the article, when it was published and last modified, the section of the website it belongs to, and any tags or categories associated with the article.
Why Open Graph tags are important
Open Graph (OG) tags are important for several reasons, primarily centering around how they improve the visibility and appeal of your content when shared on social media. Here’s a more detailed look:
1. Improved User Experience: When you share a link on social media, the platform typically pulls in some information from the linked page to create a “preview” of the content. If OG tags are properly implemented, the preview will include a title, description, and an image. This creates a richer, more informative, and engaging user experience compared to just seeing a URL.
2. Control Over Shared Content: Without OG tags, social media platforms decide for themselves what information to display from your site. This might not always align with your preferences or the key message of your page. OG tags give you control over how your content appears when shared on social media.
3. Increased Click-Through Rates: By providing a compelling title, description, and image with your OG tags, you can increase the likelihood that someone will click on the link. A link with a relevant image and description is far more engaging and click-worthy than a plain URL or a link with irrelevant information.
4. Better Visibility and Reach: When your page has relevant and eye-catching OG tags, it is more likely to be shared, increasing the visibility of your content. The better your OG data, the more likely your content is to spread across social platforms.
5. Enhanced SEO: Although OG tags are not a direct ranking factor for search engines like Google, they can indirectly benefit SEO. Better visibility and engagement on social media can lead to more traffic to your site, which can, in turn, positively affect your site’s SEO.
6. More Accurate Analytics: If you use different OG tags for the same content shared on different platforms, you can track the performance of your content on each platform more accurately.
While OG tags might seem like a small detail, they play a significant role in how your content is perceived and interacted with on social media platforms. Implementing them properly can greatly enhance the appeal and reach of your content.
Having accurate and relevant Open Graph tags can drastically enhance the performance of your content on social media platforms, leading to better engagement, more shares, and ultimately more visits to your website.
