How to Use Meta Tags for Website and Social Previews

Direct answer: Put supported metadata in the page’s <head>. Use <meta name="description"> for a concise search-result summary, Open Graph properties such as og:title, og:description, og:image, og:type, and og:url for social sharing, and robots directives only when you intentionally control indexing or preview presentation. These tags are instructions for clients that support them, not guarantees of an exact display. Google can write a different snippet from page content, and crawlers may not see metadata created only by JavaScript.

What each metadata system controls

System	Main consumer	Purpose	Important limitation
description	Search engines	Short explanation that may be used in a search snippet	Google chooses snippets per query and may use visible page text instead
Robots metadata	Search engines	Indexing and result-preview controls such as noindex and snippet limits	The crawler must be able to fetch the page to read it
Open Graph	Social clients and link unfurlers	Shared object title, description, image, type, and canonical identity	Each client decides which supported fields to display
JavaScript-generated metadata	Only clients that execute the relevant JavaScript	Dynamic titles and descriptions	Some bots do not run JavaScript; initial HTML or server rendering is safer

Google documents supported metadata in its meta tags reference. Robots directives are specified in the robots meta tag documentation. Open Graph’s properties are defined by the Open Graph protocol.

1. Add a complete set of tags to the initial HTML

Render page-specific values in the server response whenever possible. Replace the example values below for every route; do not reuse one description or image site-wide.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>How to Use Meta Tags for Website and Social Previews</title>
  <meta name="description" content="Learn which meta tags control search snippets and social link previews, with complete HTML examples and troubleshooting steps.">

  <link rel="canonical" href="https://example.com/guides/meta-tags">

  <meta property="og:title" content="How to Use Meta Tags for Website and Social Previews">
  <meta property="og:description" content="Learn which meta tags control search snippets and social link previews, with complete HTML examples and troubleshooting steps.">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/guides/meta-tags">
  <meta property="og:image" content="https://example.com/images/meta-tags-preview.png">
  <meta property="og:image:alt" content="Diagram showing search and social previews generated from page metadata">

  <meta name="robots" content="index, follow">
</head>
<body>
  <main>
    <h1>How to Use Meta Tags for Website and Social Previews</h1>
    <p>Your visible page content starts here.</p>
  </main>
</body>
</html>

Keep the title, description, Open Graph title, and Open Graph description accurate for the same page. The canonical URL should identify the permanent URL you want associated with the page.

2. Write a useful search description

1. Describe what the page helps the visitor accomplish.
2. Use wording that matches the page’s visible content and likely search intent.
3. Give each important page its own description.
4. Expect Google to replace it when another excerpt better answers a particular query.

A description is not an instruction to rank for extra keywords. It is a concise explanation for a person deciding whether the result matches their need. Google’s guidance explains that snippets are query-dependent and may come from page content instead of the description.

3. Configure Open Graph for social previews

The core Open Graph fields are:

Property	What to provide
og:title	The title shown for the shared object
og:description	A concise description of the page
og:type	The object type, commonly website or article
og:url	The canonical URL for the object’s identity in the social graph
og:image	An absolute, publicly fetchable image URL
og:image:alt	Alternative text describing the image

Use the property attribute shown by the Open Graph protocol. Keep values consistent with the page and avoid pointing og:url at a different article or variant.

4. Use robots metadata only for a deliberate control

Examples include:

<!-- Keep the page eligible for indexing and normal snippets -->
<meta name="robots" content="index, follow">

<!-- Prevent indexing of a page that should not appear in search -->
<meta name="robots" content="noindex, follow">

<!-- Limit the text and image preview shown in search -->
<meta name="robots" content="max-snippet:160, max-image-preview:large">

Do not use noindex as a testing shortcut on a production page unless that is the intended outcome. A crawler cannot read a robots meta tag when robots.txt blocks the URL, so make sure the page is crawlable first. For non-HTML resources such as PDFs, send an X-Robots-Tag HTTP response header instead:

X-Robots-Tag: noindex
X-Robots-Tag: max-snippet:160

Read Google’s robots specification for the supported directives and their exact behavior.

5. Make metadata available to crawlers

Put critical values in the initial HTML response or render them on the server. A client-side script can update the document head, but crawler capabilities vary. Google’s JavaScript SEO guidance recommends server-side rendering or prerendering when it helps users and crawlers receive complete content.

// Fragile when metadata exists only after JavaScript runs
const meta = document.querySelector('meta[name="description"]');
meta?.setAttribute('content', page.summary);

// Prefer emitting this value in the server-rendered HTML template
<meta name="description" content="...page-specific summary...">

If your framework generates metadata dynamically, inspect the raw response as well as the post-JavaScript DOM. A browser view alone does not prove that every crawler can access the tags.

6. Validate the actual URL

1. Fetch the production URL without a logged-in session.
2. Inspect the raw HTML and confirm the tags are inside <head>.
3. Check that every URL is absolute, uses HTTPS where applicable, and returns successfully.
4. Confirm the canonical URL, Open Graph URL, title, and image describe the same page.
5. Use the intended platform’s current preview or inspection tool to see what it actually reads.
6. After changing metadata, allow for client-side caching and re-fetch the URL before judging the result.

curl -L https://example.com/guides/meta-tags | sed -n '/<head>/,/<\/head>/p'

# Check response headers and redirects
curl -I -L https://example.com/guides/meta-tags

These commands verify the response you serve. They do not guarantee that a particular social client will display every field.

Common implementation mistakes

Symptom	Likely cause	Fix
Search result shows different text	Google selected a query-specific excerpt	Improve the description and the visible copy; accept that Google may rewrite the snippet
Social card has the wrong title or image	Missing, incorrect, or cached Open Graph fields	Check the production HTML, absolute image URL, and canonical identity; re-fetch with the platform’s current debugger
No preview appears	The crawler cannot reach the URL, image, or required redirects	Check DNS, TLS, status codes, authentication, robots rules, and image accessibility
Tags work in the browser but not for a bot	Metadata is inserted only after JavaScript executes	Render it in the initial response or use server-side rendering/prerendering
noindex seems ignored	The crawler was blocked by robots.txt and could not read the directive	Allow crawling long enough for the crawler to fetch the page, then verify the response
Wrong page is associated with a share	og:url or canonical URL points elsewhere	Set both to the intended permanent URL and keep redirects consistent
Image is missing	Relative URL, private asset, unsupported response, or failed redirect	Use a public absolute URL and verify it independently with an HTTP request

Performance, reliability, and maintenance

• Generate metadata during the same render as the page title so values cannot drift between requests.
• Keep descriptions and Open Graph text concise; put the complete explanation in visible content.
• Serve preview images from a reliable, cacheable URL and avoid requiring cookies or authentication.
• Use a stable image URL when possible, changing it only when the image itself changes.
• Test representative templates: homepage, article, product, category, pagination, and error pages.
• Monitor redirects and deployments so a metadata change does not accidentally add noindex or point every page at one URL.
• For localized pages, emit the title, description, canonical URL, and Open Graph values for the same locale and route.

Or skip the browser setup

If you need to inspect how a live page renders, ScreenshotNeo can capture the result through one GET request. It removes cookie and consent banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, timeouts, failed loads, and cache hits are not billed. Responses identify the page verdict and billing status with X-Page-Verdict and X-Billed headers. Its MCP server also lets AI agents use take_screenshot, get_page_info, and capture_pdf.

See the ScreenshotNeo API documentation for all options. This is a complete request you can run against a page whose metadata you want to review:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/guides/meta-tags -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com/guides/meta-tags"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com/guides/meta-tags'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo includes 1,000 screenshots per month free with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

FAQ

Do meta descriptions directly change rankings?

They describe a page and can influence the text shown in a result, but Google may choose another excerpt. Do not treat the description as a guaranteed ranking control.

Should I use both name and property?

Use name for metadata such as description and robots; use the Open Graph properties defined by the protocol for social object data.

Can I put these tags in the body?

Place metadata in the document head so supported clients can discover it reliably.

Will every social platform use Open Graph?

Clients process the metadata they support and can choose their own display. Verify the actual target platform rather than promising an identical card everywhere.

What should I do for a PDF?

Use the X-Robots-Tag response header for robots controls on non-HTML resources, and provide a normal HTML landing page when you need title, description, and Open Graph previews.

Primary references

• Google: Meta Tags and Attributes that Google Supports
• Google: Robots Meta Tags Specifications
• The Open Graph protocol
• web.dev: Metadata
• Google: JavaScript SEO Basics
• Google: How to Write Meta Descriptions