What is the optimal character length for SEO titles and descriptions?

Keep SEO titles between 50-60 characters (under 580px width) and meta descriptions between 120-155 characters (under 960px width) to avoid truncation in Google SERP snippets.

What are the recommended dimensions for an OpenGraph social image (`og:image`)?

1200 x 630 pixels maintaining a 1.91:1 aspect ratio. Keep the file size under 5MB for fast crawler indexing across Facebook, Twitter, and LinkedIn.

Why does my shared link show an outdated image or title on social platforms?

Social platforms cache OpenGraph metadata. Use Facebook's Sharing Debugger or Twitter's Card Validator to force an immediate cache refresh.

What is a canonical URL and why is it critical?

A canonical tag (` `) defines the master authoritative URL for a page, preventing search engines from penalizing duplicate URLs caused by query parameters or session IDs.

Do meta keywords still affect Google search rankings?

No. Google has officially ignored ` ` since 2009. Focus your SEO efforts on descriptive titles, structured data, content quality, and OpenGraph tags.

SEO & Webmaster Popular

SEO Meta Tag & OpenGraph SERP Generator

Generate high-ranking SEO meta tags with live visual previews for Google SERP search results, Twitter/X Cards, and Facebook / LinkedIn OpenGraph cards.

Real-time visual previews for Google SERP search results, Twitter/X Cards, and Facebook / LinkedIn link previews

Character count and pixel-width warning indicators for Titles (60 chars) and Descriptions (155 chars)

Generates standard HTML meta tags, OpenGraph (`og:*`), Twitter Cards (`twitter:*`), and Robots directives

One-click export for clean HTML `<head>` markup, Next.js metadata objects, and Astro props

Canonical URL, viewport, mobile theme color, and favicon configuration

The Comprehensive Guide to SEO Meta Tags, OpenGraph, and Social Previews

In-depth specifications, architectural mechanics, real-world code implementations, and industry best practices.

Core HTML Meta Tags: Title, Description, Viewport, and Canonical

• HTML meta tags reside inside the <head> element, providing search engine crawlers and web browsers with structured page metadata:
• <title>: The single most influential on-page SEO factor. Keep between 50-60 characters.
• <meta name="description">: The summary snippet rendered in Google SERP. Keep between 120-155 characters.
• <link rel="canonical">: Specifies the authoritative master URL, preventing duplicate content penalties caused by query parameters or tracking tags.
• <meta name="robots">: Instructs search bots on indexing (index/noindex) and link following (follow/nofollow).

Implementation Example

<!-- Baseline Production HTML <head> Meta Tags -->
<title>WebCraftKit – Fast, Private Developer Utilities</title>
<meta name="description" content="Free, privacy-first developer tools running 100% client-side. Format JSON, decode JWT, calculate hashes, and generate CSS box shadows." />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="canonical" href="https://webcraftkit.com/" />
<meta name="robots" content="index, follow" />

The Open Graph Protocol (og:*): Dominating Social Feeds

Standardized by Facebook and adopted by LinkedIn, Slack, Discord, and iMessage, the Open Graph protocol transforms plain URLs into rich, highly engaging media cards. Essential tags include og:title, og:description, og:image (recommended resolution: 1200x630px, 1.91:1 aspect ratio), og:url, og:type (e.g., website, article), and og:site_name.

Implementation Example

<!-- Open Graph Social Share Tags -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://webcraftkit.com/" />
<meta property="og:title" content="WebCraftKit – Precision Web Crafting Tools" />
<meta property="og:description" content="100% client-side developer utilities with zero server latency." />
<meta property="og:image" content="https://webcraftkit.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Twitter / X Cards: Summary vs Summary Large Image

Twitter utilizes proprietary twitter:* tags to format link shares. The twitter:card property defines card layout: summary renders a compact square thumbnail beside the text, while summary_large_image renders a prominent full-width banner image, substantially improving click-through rates (CTR).

Implementation Example

<!-- Twitter / X Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@webcraftkit" />
<meta name="twitter:creator" content="@webcraftkit" />
<meta name="twitter:title" content="WebCraftKit – Precision Web Crafting Tools" />
<meta name="twitter:description" content="100% client-side developer utilities with zero server latency." />
<meta name="twitter:image" content="https://webcraftkit.com/og-image.png" />

Framework Integration: Astro and Next.js App Router

Modern frameworks automate metadata rendering. In Next.js 14/15 App Router, export a static or dynamic Metadata object using generateMetadata(). In Astro, encapsulate tags into a reusable SeoHead.astro layout component.

Implementation Example

// Next.js App Router Dynamic Metadata Example
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'WebCraftKit Tools',
  description: 'Browser-native developer tools',
  openGraph: {
    title: 'WebCraftKit Tools',
    description: 'Browser-native developer tools',
    images: [{ url: '/og.png', width: 1200, height: 630 }],
  },
};

Knowledge Base & Clarifications