What are OG metadata fields and why is it important to have it on my website?

April 14, 2024

OG (Open Graph) metadata is a type of information that you can add to the HTML of your web pages to control how your content is represented when shared on social media platforms. These meta tags enhance the visibility and presentation of your website content on social networks like Facebook, Twitter, and LinkedIn, making it more appealing and shareable. This blog post will explain the importance of OG metadata, what fields you can use, and how to implement them to improve engagement and reach on social media.

Technical Deep Dive

Open Graph metadata allows web developers to turn a webpage into a rich object in a social graph. For instance, specifying the og:image property can directly influence the thumbnail image displayed when a link from your site is shared on social media, improving user engagement and click-through rates.

Importance of OG Metadata:

  1. Control Social Media Presentation: OG tags let you specify the title, description, image, and more, giving you control over how your content appears when shared.
  2. Increase Engagement: Well-crafted OG tags can make your content more enticing to click on, which can significantly increase traffic from social media platforms.
  3. Enhance Link Integrity: By providing consistent metadata, you ensure that the information accompanying your shared links is always accurate and reflective of the content.

Key OG Metadata Fields:

  • og:title: The title of your article or page as you would like it to appear when shared.
  • og:type: The type of your content (e.g., article, product, video).
  • og:image: URL of an image you want to represent your content.
  • og:url: The canonical URL of the page or article.
  • og:description: A brief description of the content, which will appear below the title in shares.

Why You Need OG Metadata:

  • Brand Consistency: OG metadata ensures that every share on social media maintains a consistent brand image and message.
  • Optimized Sharing: Tailored metadata can lead to higher quality shares, which can boost visibility and engagement from social platforms.
  • SEO Benefits: While primarily for social media, having well-defined metadata can also contribute indirectly to SEO through increased engagement and traffic.

How to Implement OG Metadata:

NextJS

In Next.js, you can include OG metadata within the Head component of your pages:

<Head>
    <meta property="og:title" content="Title of Your Article" />
    <meta property="og:description" content="Description of your content" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="URL of the article" />
    <meta property="og:image" content="URL of the image" />
</Head>

WordPress

If you’re using WordPress, plugins like Yoast SEO or All in One SEO Pack can automatically add OG tags to your pages:

  1. Install and activate the plugin.
  2. Navigate to the social media settings section.
  3. Configure the settings to automatically generate OG tags based on your content.

Plain HTML

For static HTML websites, manually add the OG tags in the <head> section of your HTML documents:

<head>
    <meta property="og:title" content="Your Content Title" />
    <meta property="og:description" content="Brief description of the page" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.example.com/page-url" />
    <meta property="og:image" content="https://www.example.com/image.jpg" />
</head>

Try now, it's free