How to Set Up Social Media Meta Tags: A Practical Implementation Guide

Social previews need proper meta tags. This guide shows how to implement them in your code, with examples for different frameworks.

Planning Social Metadata

Plan before coding. Decisions here affect all pages.

Page Types

Homepages: Brand and promotions.

Articles: Author, dates.

Products: Price, availability.

Map your site and plan metadata per type to avoid inconsistencies.

Images

Use 1200x630 pixels for most platforms. Self-host for reliability. Include alt text.

Text

Titles <60 chars. Descriptions compelling, under 150-160 chars. Focus on clicks, not just SEO.

Basic Open Graph Tags

Core tags for Facebook, LinkedIn, etc.

HTML

Add to :

<meta property="og:title" content="Your Page Title Here" />
<meta
  property="og:description"
  content="A compelling description that encourages clicks."
/>
<meta property="og:type" content="article" />
<meta property="og:url" content="https://yoursite.com/page-url/" />
<meta
  property="og:image"
  content="https://yoursite.com/images/social-preview.jpg"
/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Your Site Name" />

This basic structure applies universally. For articles, add publication and author metadata:

<meta property="article:published_time" content="2026-04-20T10:00:00Z" />
<meta
  property="article:author"
  content="https://yoursite.com/authors/author-name"
/>

Next.js

Use Metadata API:

import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Your Page Title',
  description: 'A compelling description for social previews',
  openGraph: {
    title: 'Your Page Title',
    description: 'A compelling description for social previews',
    url: 'https://yoursite.com/page-url/',
    type: 'article',
    images: [{
      url: 'https://yoursite.com/images/social-preview.jpg',
      width: 1200,
      height: 630,
      alt: 'Descriptive alt text'
    }],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Your Page Title',
    description: 'A compelling description for social previews',
    images: ['https://yoursite.com/images/social-preview.jpg'],
  },
}

The Metadata API handles duplicate tags automatically and ensures proper formatting. For dynamic values, use generateMetadata functions that receive route parameters and return appropriate metadata.

React SPAs

Tags need to be in initial HTML. Use react-helmet for SSR, or prerender for crawlers. Hosting platforms like Vercel handle this auto.

Twitter Card Tags

Use these for best Twitter display.

Essential Tags

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta
  name="twitter:description"
  content="A compelling description for social previews"
/>
<meta
  name="twitter:image"
  content="https://yoursite.com/images/social-preview.jpg"
/>
<meta name="twitter:image:alt" content="Descriptive alt text for the image" />
<meta name="twitter:site" content="@YourSiteHandle" />
<meta name="twitter:creator" content="@AuthorHandle" />

The twitter:card type of summary_large_image displays a prominent image that takes up significant screen space in the Twitter interface, typically generating higher engagement than the compact summary format.

Handles

twitter:site for organization, twitter:creator for author. In Next.js:

export const metadata = {
  twitter: {
    card: "summary_large_image",
    creator: "@AuthorHandle",
    site: "@YourSiteHandle",
  },
};

JSON-LD Structured Data

Helps search engines. For articles:

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Your Article Headline",
    "description": "A brief description of the article",
    "image": "https://yoursite.com/images/social-preview.jpg",
    "author": {
      "@type": "Person",
      "name": "Author Name",
      "url": "https://yoursite.com/authors/author-name"
    },
    "publisher": {
      "@type": "Organization",
      "name": "Your Site Name",
      "logo": {
        "@type": "ImageObject",
        "url": "https://yoursite.com/images/logo.jpg"
      }
    },
    "datePublished": "2026-04-20T10:00:00Z",
    "dateModified": "2026-04-20T10:00:00Z",
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": "https://yoursite.com/article-url/"
    }
  }
</script>

In Next.js with the App Router, include this script in a Head component or use the metadata API's scripts array:

export const metadata = {
  other: {
    "application/ld+json": {
      "@context": "https://schema.org",
      "@type": "Article",
      headline: "Your Article Headline",
      // ... other properties
    },
  },
};

Testing

Use these tools:

• Facebook Sharing Debugger

• Twitter Card Validator

• LinkedIn Post Inspector

• Google Rich Results Test

Test all page types.

Troubleshooting

Caches

Platforms cache data. Use debug tools to refresh.

Images

Ensure URLs are absolute and accessible. Check bot blocking.

Text Truncation

Titles <60 chars, descriptions <150.

Content Type

Must be text/html.

Automation

Manual is tough at scale. Use CMS plugins or build into pipelines.

Try our Meta Tag Generator for quick tags.

Keep updating as platforms change.