HTML Meta Tags: Examples for SEO and Social Sharing

HTML metadata belongs in the document <head>. Use a unique <title> and page-specific description for search, robots directives only when you need to restrict indexing or snippets, and Open Graph properties for social previews. Metadata influences how crawlers and platforms process a page; it cannot guarantee an exact title, snippet, ranking, or social card.

Copyable baseline document

Start with valid head markup. Google says invalid elements in the head can make it assume the head has ended and ignore metadata that follows. Its supported head elements include title, meta, link, script, style, base, noscript, and template. See Google’s valid metadata guidance.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML Meta Tags: Practical Examples | Example Site</title>
  <meta name="description" content="See practical HTML meta tag examples for search titles, descriptions, indexing controls, and social sharing.">

  <meta property="og:title" content="HTML Meta Tags: Practical Examples">
  <meta property="og:description" content="A concise guide to search and social metadata, with copyable examples.">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/html-meta-tags/">
  <meta property="og:image" content="https://example.com/images/html-meta-tags.jpg">
</head>
<body>
  <h1>HTML Meta Tags: Practical Examples</h1>
</body>
</html>

Replace the example URL, copy, and image with values for the actual page. Keep metadata in the head, before the closing </head> tag.

Which meta tags should you put in HTML?

Tag or property	Main consumer	Use it for	Guarantee
`<title>`	Search engines, browsers	The page’s primary title	No guarantee Google will display the exact string
`meta name="description"`	Search engines	A concise page summary	Google may use it or generate a snippet from page text
`meta name="robots"`	Search crawlers	Indexing and snippet directives	Only crawlers that can fetch the page can see it
`meta name="googlebot"`	Googlebot	Google-specific directives	Applies to Googlebot when it can crawl the page
`og:title`, `og:description`, `og:type`, `og:url`, `og:image`	Open Graph consumers and social platforms	Share previews	Platform rendering can vary
`charset`	Browsers	Character encoding	Use UTF-8 consistently
`viewport`	Mobile browsers	Responsive layout behavior	Does not affect ranking by itself

Title tags for SEO

Give every indexable page a distinct, concise, accurate <title>. Avoid repeating boilerplate and keyword stuffing. There is no fixed character limit in HTML; Google truncates the displayed title link to fit the device and may rewrite it.

<title>Python CSV Parsing: A Practical Guide | Acme Docs</title>

Google forms title links automatically from several signals, including the title element, visible headings, og:title, prominent page text, and links. Its title-link documentation explains why a stale, unclear, incomplete, or mismatched title can be changed.

Meta descriptions that describe the page

Write a useful, page-specific summary that matches the visible content and gives a reader a reason to open the result. Google sometimes uses the description and sometimes extracts text from the page, so do not promise a fixed length or exact snippet.

<meta name="description" content="Learn how to parse CSV files in Python, handle quoted fields, validate rows, and report errors with complete examples.">

Read Google’s snippet guidance for how snippets are generated.

Robots, Googlebot, and snippet directives

Use directives only when you intend to constrain crawling, indexing, or snippets. The crawler must fetch the page to see a page-level directive.

<!-- Keep the URL out of Google's index -->
<meta name="robots" content="noindex">

<!-- Apply a directive specifically to Googlebot -->
<meta name="googlebot" content="noindex, nofollow">

<!-- Limit snippet text; values are examples, not guarantees of display -->
<meta name="robots" content="max-snippet:160">

<!-- Prevent a text fragment from being used in a snippet -->
<p data-nosnippet>Internal pricing note not intended for search snippets.</p>

For PDFs, images, and other non-HTML responses, send the equivalent X-Robots-Tag HTTP header. See Google’s robots meta specification. Do not block a URL in robots.txt when you need Google to read its noindex; blocking can prevent the crawler from seeing the instruction and does not necessarily remove the URL from indexing.

Open Graph describes a page as an object in a social graph. Include the core properties recommended by the Open Graph protocol, and keep them consistent with the page users will receive.

<meta property="og:title" content="HTML Meta Tags: Practical Examples">
<meta property="og:description" content="A concise guide to search and social metadata, with copyable examples.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/html-meta-tags/">
<meta property="og:image" content="https://example.com/images/html-meta-tags.jpg">

og:title can be one signal Google considers for a title link, but it is not a replacement for an accurate HTML title and does not guarantee a particular social or search rendering. Use an absolute, publicly reachable image URL and update the metadata when the page’s subject changes.

Browser metadata: charset, viewport, and language

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

UTF-8 prevents common character decoding problems. The viewport declaration lets responsive layouts use the device width. Set lang for accessibility and document semantics, but Google says it does not rely on the HTML lang attribute to identify page language.

Tags you should not add for Google SEO

Do not add <meta name="keywords"> as an SEO tactic. Google states: “The meta-keyword tag is not used by Google Search, and it has no effect on indexing and ranking at all.” Treat Open Graph as sharing metadata, not a ranking trick. Metadata alone cannot guarantee rankings, rich results, title display, or snippet text.

Framework and template implementation

Static HTML

Render page-specific values in each document head. Never reuse one description or canonical URL across every route.

Server-rendered applications

Generate metadata from the route’s data before sending HTML. Ensure the initial response contains the title and description when crawlers do not execute your client-side JavaScript.

Client-side applications

Update document.title and meta elements during navigation, but verify the server response and rendered HTML. A client-only change may not be visible to every crawler or sharing fetcher.

function setMeta({ title, description, url }) {
  document.title = title;
  const desc = document.querySelector('meta[name="description"]');
  if (desc) desc.setAttribute('content', description);
  const ogTitle = document.querySelector('meta[property="og:title"]');
  if (ogTitle) ogTitle.setAttribute('content', title);
  const ogDescription = document.querySelector('meta[property="og:description"]');
  if (ogDescription) ogDescription.setAttribute('content', description);
  const ogUrl = document.querySelector('meta[property="og:url"]');
  if (ogUrl) ogUrl.setAttribute('content', url);
}

Validation checklist

View the raw HTML response and confirm metadata is inside <head>.
Check that every indexable page has a distinct title and description.
Confirm the title, description, visible heading, canonical URL, and Open Graph values describe the same page.
Remove accidental noindex, nofollow, nosnippet, or restrictive max-snippet directives.
Make sure robots.txt and authentication do not prevent intended crawlers from fetching the page.
Check that og:image is an absolute URL and returns an image response.
After changing metadata, allow crawlers and sharing fetchers to refetch the page before judging the result.

Why Google shows a different title or description

Title rewritten: Google found the supplied title stale, inaccurate, incomplete, unclear, or inconsistent with headings and prominent text. Align those signals.
Description replaced: Google found page text more useful for the query. Improve the visible introduction as well as the meta description.
Directive ignored: The crawler could not fetch the page, so it could not see the directive. Review robots.txt, firewall rules, authentication, and status codes.
Social card is old: A platform may be serving a cached fetch. Confirm the current response and request a refresh using that platform’s tools.
Metadata missing: A parser may have stopped at an invalid head element. Move unsupported markup out of the head and validate the document.

Or skip the browser setup

If you need a rendered screenshot of a page to review its title, description, Open Graph card, or responsive layout, ScreenshotNeo provides a website screenshot API and MCP server. The DIY route is a browser plus your own capture code; this is one GET request:

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

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

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

See the ScreenshotNeo API documentation for all options. Cookie and consent banners, newsletter popups, and chat widgets are removed before the shot; bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers identify the verdict and billing result. The MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

Performance, reliability, and cost notes

Keep the head small and deterministic so parsers can reach the important elements quickly.
Serve metadata in the initial HTML response when possible; this reduces dependence on JavaScript execution.
Use one canonical value for each URL, title, description, and Open Graph property to avoid conflicting signals.
Do not add directives globally from a shared template unless every route should receive them.
For screenshot-based QA, wait for the relevant selector or network idle when page content is rendered asynchronously; cache repeated captures when appropriate.

FAQ

Do meta tags still matter for SEO?

Yes, for communicating titles, descriptions, and crawl or snippet instructions. They are signals, not ranking guarantees.

What is the ideal description length?

There is no guaranteed fixed length. Write a complete, accurate summary and let Google truncate or replace it when needed.

Should Open Graph and the HTML title match?

They should describe the same page. They may use different wording for search and sharing, but contradictions create confusing previews and signals.

Can noindex be combined with robots.txt blocking?

Do not block crawling when you need a crawler to see noindex. A blocked crawler cannot reliably receive the page-level instruction.

Does the lang attribute determine Google’s language?

Google says it does not rely on the HTML lang attribute for that purpose, although setting it remains useful for accessibility and semantics.