When you share a link on social media, the image, title, and description should grab attention instantly. But if these elements don’t display correctly, showing random text or no image at all it’s likely because OpenGraph tags are missing.
OG tags are small pieces of code that tell platforms like Facebook, LinkedIn, and X exactly how your page should look when shared. They control the headline, preview text, and image, ensuring your content looks polished and click-worthy every time.
In this guide, we’ll explain what OG tags are, why they matter, and how to implement them.
What Are OpenGraph Tags?
OpenGraph tags (also known as OG tags) are bits of HTML code that tell social media platforms like Facebook, Twitter, LinkedIn, and Slack what to display when someone shares your page. Think of them like mini-ads: they control the title, image, and description that appear when your link shows up in feeds or messages.
Without these tags, social platforms might pull random or poorly formatted content from your page resulting in bland or unattractive link previews.
Why Do Open Graph Tags Matter?
1. Attract Attention on Social Media
With the right OG tags, your shared content stands out. It’s more eye-catching, shows the right title and image, and generates better engagement.
2. Control Over Social Displays
OG tags give you the power to choose what appears when your URLs are shared. Instead of confusing or irrelevant snippets, you provide a polished presentation.
3. Better Understanding by Social Platforms
Social networks use OG tags to interpret and categorize your content accurately like knowing the type of page or the language of your content. This helps with search visibility within those platforms.
Essential OpenGraph Tags to Use
Here are the core OG tags to include, placed inside your <head> section:
- og:title: The title shown in social previews (suggested length: under 60 characters).
- og:description: Brief summary with a clear value proposition (keep it around 120–160 characters).
- og:image: A compelling image representing the page; ideal size is around 1200x630px (1.91:1 aspect ratio).
- og:url: The canonical URL for sharing. Always point to the main version of your page.
- og:type: Content type like website, article, or video, depending on the page.
- Optional extras: og:site_name, og:locale, og:video, og:audio, and others depending on content needs.
How to Add OpenGraph Tags Easily
If you’re using a CMS like WordPress, plugins such as Yoast or Rank Math make adding OG tags simple. Otherwise, you can add them manually to your <head> section:
<meta property=”og:title” content=”Your Page Title Here”>
<meta property=”og:description” content=”Short, compelling summary of the page”>
<meta property=”og:image” content=”https://yourdomain.com/image.jpg”>
<meta property=”og:url” content=”https://yourdomain.com/this-page”>
<meta property=”og:type” content=”article”>
After implementation, always test your OG tags using tools like Facebook Sharing Debugger or Twitter Card Validator to ensure they render correctly.
What are OpenGraph tags?
OpenGraph tags are HTML meta tags that define how links appear when shared on social media platforms (e.g., title, image, description).
Which OG tags are essential?
The four essentials are og:title, og:description, og:image, and og:url. Others like og:type and og:site_name are also helpful.
Do OG tags improve SEO rankings?
Not directly for search engines, but they boost social media engagement and referrals an indirect SEO benefit.
How do I check OG tags on my site?
You can view page source manually or use tools like ClickRank.ai’s OpenGraph Tags Checker or a social preview debugger.
