ew logoEricko Wicaksono
Hire me

Writing

Notes - SEO Social Sharing Meta Tag

Posted · Updated · 3 min read#note#seo#html

seo-social

When building your own website, SEO is easy to postpone. But it decides two things: how your site shows up in search engines like Google and Bing, and - just as important for most sites - how your link looks when someone shares it on WhatsApp, LinkedIn, X or Slack. A bare URL looks dead; a link with a title, description and 1200×630 image gets clicked. In this note I share the templates I use to make shared links look right.

Minimal template

<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Open Graph data (Facebook, LinkedIn, WhatsApp, Slack, Discord, X fallback) -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.example.com/" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />

<!-- Twitter/X card -->
<meta name="twitter:card" content="summary" />

Note content=, not value= - value is a typo I have seen copied around for years, and it silently breaks the card.

Template for an article

<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.example.com/" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name" />
<meta property="article:published_time" content="2026-01-15T08:00:00Z" />

<!-- Twitter/X card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@publisher_handle" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Page description less than 200 characters" />
<meta name="twitter:image" content="https://www.example.com/image.jpg" />

The big image card (summary_large_image) almost always performs better than the small square one - it turns your link into a mini preview of the page.

Template for a product

<title>Product Name - 60-70 characters max</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Open Graph product data -->
<meta property="og:type" content="product" />
<meta property="og:title" content="Product Name" />
<meta property="og:url" content="https://www.example.com/product" />
<meta property="og:image" content="https://example.com/product.jpg" />
<meta property="og:description" content="Product description" />
<meta property="og:price:amount" content="15.00" />
<meta property="og:price:currency" content="USD" />

<!-- Twitter/X card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Product Name" />
<meta name="twitter:description" content="Product description" />
<meta name="twitter:image" content="https://www.example.com/product.jpg" />

(Google+ markup is long gone - do not copy templates that still include it. And X retired its dedicated product card; Open Graph product tags plus summary_large_image is the combination that works everywhere today.)

Image rules that matter

  • 1200×630 pixels is the Open Graph sweet spot - render text large enough to read as a thumbnail.
  • Absolute URLs only (https://...), never relative paths - the crawler fetching the image is not on your site.
  • Keep it under ~1 MB or some platforms skip it.

Structured data (JSON-LD)

Meta tags control the share card; JSON-LD feeds search engines their rich results:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Page Title",
  "image": "https://example.com/image.jpg",
  "author": { "@type": "Person", "name": "Author Name" },
  "datePublished": "2026-01-15"
}
</script>

Validate it

Most of the old validators are dead (the Twitter card validator, Google's rich snippets tool, Pinterest's validator - all retired). The ones that still work in 2026:

Facebook / Meta:  https://developers.facebook.com/tools/debug/
LinkedIn:         https://www.linkedin.com/post-inspector/
Google:           https://search.google.com/test/rich-results
All-in-one:       https://www.opengraph.xyz/

My actual workflow: paste the URL into the Facebook debugger and LinkedIn inspector - between them they catch nearly every broken image or missing tag - then check the rich results test if I added JSON-LD. X itself has no validator anymore; it just reads your Open Graph tags, so if Facebook is happy, X usually is too.

Reference: the classic Moz template post and the Open Graph protocol spec.

← All writingBack home