When someone shares your website link on WhatsApp, LinkedIn, or Facebook… what shows up?
If it’s just a chopped-off title and a random image, congrats: you’ve just missed a free opportunity to grab attention.
That’s where Open Graph Protocol (OGP) meta tags come in — the official way to tell social networks exactly what to display in your link preview.
What Is the Open Graph Protocol?
Created by Facebook, OGP defines a set of meta tags that turn any web page into a “social object.” In other words: when someone shares your link, you decide the title, description, image, language, and other details that appear.
Why Use og: Meta Tags?
Without these tags, social networks try to guess what to display—and the result isn’t always pretty.
With Open Graph, you control the title, description, image, and link shown in your page’s preview. This helps:
- Improve how your shared link looks
- Increase click-through rates
- Strengthen your brand identity
How to Use It
Add these tags inside your HTML <head>:
<meta property="og:title" content="Complete Guide to Meta Tags" />
<meta property="og:description" content="Learn how to use the most important meta tags on your website." />
<meta property="og:image" content="https://mywebsite.com/preview-image.jpg" />
<meta property="og:url" content="https://mywebsite.com/meta-tags" />
<meta property="og:type" content="website" />
Explanation of Each:
-
og:title– The title shown in the preview (recommended: up to 60 characters). -
og:description– A catchy summary of the content (up to 110 characters to avoid being cut off). -
og:image– The featured image. Ideal: 1200x630px, JPG/PNG, and publicly accessible URL. -
og:url– The canonical page URL. Prevents content duplication. -
og:type– Defines the type of content. Examples:website,article,video,product.
When to Use It?
Use it anytime your page can be shared on social media: blogs, portfolios, landing pages, online stores, etc.
These tags are part of your social SEO strategy - and totally worth it.
Powerful Complementary Meta Tags
<meta property="og:site_name" content="Werliton Silva" />
<meta property="og:locale" content="pt_BR" />
<meta property="og:locale:alternate" content="en_US" />
-
og:site_name– Your site or project name; appears in some previews. -
og:locale– Sets the language and region. Example:pt_BR,en_US,es_ES. -
og:locale:alternate– Alternate language versions of the same page (great for international SEO).
Useful Extras (When Applicable)
<meta property="article:author" content="https://www.linkedin.com/in/werliton-silva" />
<meta property="article:published_time" content="2025-04-28T08:00:00Z" />
<meta property="article:modified_time" content="2025-04-28T09:30:00Z" />
-
article:author– Link to the content’s author. -
article:published_time– Publication date (ISO 8601). -
article:modified_time– Last updated date.
Quick Tips
- Test your link: Use the Facebook Sharing Debugger or LinkedIn Post Inspector to preview how your link will appear.
-
Don’t repeat
og:titlein the<title>tag: Makeog:titlemore promotional and eye-catching. - Avoid low-res images or tiny text — nobody can read that in the preview.
Conclusion: Your Link Deserves Respect
Social media doesn’t forgive poorly formatted links. The good news? You only need around 6 well-placed lines in your HTML <head> to fix that.
So… are you going to leave it ugly or fix it?
If this post saved you from an embarrassing preview, bookmark it, share it with someone who still needs to learn, and let’s make the web a better-looking place — one meta tag at a time. 😎
Need practical help? Just reach out.
And if you liked it, hit that “claps” 👏 button up top!
Top comments (1)
Nice post