Meta Tags for SEO: The Complete Guide to Open Graph & Twitter Cards

Which Meta Tags Still Matter for SEO?

As of 2024, Google officially uses or respects these meta tags:

<title> — primary ranking signal for page topic; shown in search results. Keep under 60 characters.
<meta name="description"> — not a ranking factor, but significantly affects click-through rate. Keep under 155 characters, include target keyword naturally.
<link rel="canonical"> — prevents duplicate content penalties by pointing to the preferred URL.
<meta name="robots"> — controls indexing (noindex, nofollow, etc.).
<link rel="hreflang"> — tells Google which language version to serve per region.

Meta keywords are ignored by all major search engines and should not be used.

The Essential SEO Head Block

<head>
  <title>Target Keyword | Brand Name</title>
  <meta name="description" content="155 characters that describe the page value and include the primary keyword. Write for humans first." />
  <link rel="canonical" href="https://example.com/exact-page-url" />
  <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
</head>

Open Graph Tags (OG)

Open Graph tags control how your page appears when shared on Facebook, LinkedIn, Discord, Slack, and most other social platforms. Without them, platforms guess — usually poorly.

<!-- Required OG tags -->
<meta property="og:title" content="Page Title Here" />
<meta property="og:description" content="A concise description for social cards." />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:url" content="https://example.com/page-url" />
<meta property="og:type" content="website" />

<!-- Recommended OG tags -->
<meta property="og:site_name" content="Brand Name" />
<meta property="og:locale" content="en_US" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Description of the image" />

OG Image Best Practices

Recommended size: 1200 × 630 pixels (2:1 aspect ratio). This renders well on all platforms.
Keep important content within the center 800 × 418px — edges may be cropped on some platforms.
Use JPEG for photographs (smaller file size), PNG for text-heavy or flat designs.
Cache-bust your OG image URL when the image changes (add a query param or hash): ?v=2024-01-01.
Test with the Facebook Sharing Debugger.

Twitter / X Card Tags

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Description for Twitter." />
<meta name="twitter:image" content="https://example.com/twitter-card.png" />
<meta name="twitter:creator" content="@yourtwitterhandle" />
<meta name="twitter:site" content="@yoursitehandle" />

Twitter falls back to OG tags if Twitter-specific tags are absent, so the OG tags above cover both platforms. Add Twitter tags when you want different content for X.

Twitter Card Types

summary — small thumbnail, title, description
summary_large_image — full-width image card (most impactful for most content)
app — mobile app download card
player — embedded video/audio player

Article and Blog Post Schema

For blog posts and articles, use JSON-LD structured data to enable rich results in Google:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Article Title",
  "description": "Article description.",
  "datePublished": "2024-01-15",
  "dateModified": "2024-03-01",
  "author": {
    "@type": "Organization",
    "name": "ToolsVito",
    "url": "https://toolsvito.com"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ToolsVito",
    "logo": { "@type": "ImageObject", "url": "https://toolsvito.com/favicon.svg" }
  },
  "image": "https://toolsvito.com/og.png"
}
</script>

BreadcrumbList Schema

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com" },
    { "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://example.com/blog" },
    { "@type": "ListItem", "position": 3, "name": "Current Article" }
  ]
}

Generate Meta Tags Instantly

Use ToolsVito's Meta Tag Generator to build a complete meta tag block — including OG, Twitter Cards, and robots directives — with a live preview of how your page will look in social shares.