Back to Blog
Meta Tags

Complete Guide to Open Graph Meta Tags for Social Media

Shreyansh Gohil
January 15, 2025
8 min read

Complete Guide to Open Graph Meta Tags for Social Media


Open Graph meta tags are essential for controlling how your website appears when shared on social media platforms. In this comprehensive guide, we'll cover everything you need to know about implementing Open Graph tags effectively.


What are Open Graph Meta Tags?


Open Graph (OG) tags are HTML meta elements that allow you to control how your content appears when shared on social media platforms like Facebook, LinkedIn, Twitter and WhatsApp. They were originally developed by Facebook but are now widely adopted across the web.


Why Open Graph Tags Matter


Without proper Open Graph tags, social media platforms will try to guess what to display when your link is shared. This often results in:

  • Poor image selection
  • Incorrect titles
  • Missing descriptions
  • Unprofessional appearance

With Open Graph tags, you have complete control over how your content looks when shared.


Essential Open Graph Tags


1. og:title

The title of your content as it should appear when shared.


<meta property="og:title" content="Your Page Title Here" />

Best Practices:

  • Keep it under 60 characters
  • Make it compelling and descriptive
  • Include your brand name if relevant

2. og:description

A brief description of your content.


<meta property="og:description" content="A compelling description that entices users to click." />

Best Practices:

  • Keep it between 150-200 characters
  • Write it to encourage clicks
  • Include a call-to-action if possible

3. og:image

The image that represents your content.


<meta property="og:image" content="https://yoursite.com/image.jpg" />

Best Practices:

  • Use images at least 1200x630 pixels (1.91:1 ratio)
  • Keep file size under 1MB
  • Use absolute URLs (not relative)
  • Use JPG or PNG format

4. og:url

The canonical URL of your content.


<meta property="og:url" content="https://yoursite.com/page-url" />

5. og:type

The type of content (website, article, video, etc.).


<meta property="og:type" content="website" />

Additional Useful Tags


og:site_name

The name of your website.


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

og:locale

The locale of your content.


<meta property="og:locale" content="en_US" />

Complete Example


Here's a complete example of Open Graph tags for a typical webpage:


<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:title" content="Your Amazing Page Title" />
<meta property="og:description" content="A compelling description that makes people want to click." />
<meta property="og:image" content="https://yoursite.com/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:locale" content="en_US" />

Testing Your Open Graph Tags


After implementing your Open Graph tags, test them using:

  • Facebook Sharing Debugger
  • LinkedIn Post Inspector
  • Our Meta Tag Preview tool

Common Mistakes to Avoid


1. Using relative URLs for images - Always use absolute URLs

2. Images too small - Use at least 1200x630 pixels

3. Missing og:image - Always include an image

4. Title too long - Keep it under 60 characters

5. Description too short - Aim for 150-200 characters


Conclusion


Open Graph tags are essential for professional social media sharing. By implementing them correctly, you ensure your content looks great and attracts more clicks when shared.


Use our Meta Tag Preview tool to test how your Open Graph tags appear across different social media platforms!