Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallSome links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
The essential HTML metadata belongs inside a valid <head>: a unique <title>, a page-specific description, indexing directives only when needed, and Open Graph properties for social previews. These tags guide search engines, crawlers, browsers, and sharing systems, but none guarantees a particular ranking, snippet, title link, or social-card rendering.
This guide shows copyable markup, explains what each tag actually controls, identifies obsolete advice, and gives troubleshooting steps for pages whose metadata is ignored or rewritten.
What meta tags should I put in my HTML?
Start with a standards-valid document head. Google lists title, meta, link, script, style, base, noscript, and template as valid head elements. An invalid element such as iframe or img can make Google assume the head has ended and ignore metadata that follows. See Google’s valid metadata guidance.
Use this baseline, replacing the example copy and URLs with information about the actual page:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<!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="Practical HTML meta tag examples for search titles, descriptions, indexing controls, and social sharing.">
<meta name="robots" content="index,follow">
<link rel="canonical" href="https://example.com/html-meta-tags/">
<meta property="og:title" content="HTML Meta Tags: Practical Examples">
<meta property="og:description" content="Copyable metadata examples for search and social previews.">
<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>The charset declaration tells the browser how to decode the document, while viewport helps mobile browsers size the page correctly. They affect browser behavior rather than search ranking.
How do I write an SEO title?
Give every indexable page a distinct, concise, accurate <title>. State the page’s subject first and add a brand name only when it helps identify the result. Avoid repeating boilerplate, stuffing variants of the same keyword, or promising something the page does not contain.
There is no fixed character limit for the HTML element. Google truncates the displayed title link to fit the available device width and may rewrite it. Its systems can use the title element, the visible heading, prominent page text, links, and og:title. Google says title-link generation is automated and may change a title that is stale, inaccurate, incomplete, mismatched in language, or unclear. Read Google’s title-link documentation.
Title example
<title>Change a Git Branch: Safe Commands and Recovery</title>Make the visible <h1> and opening content support the same subject. Metadata cannot compensate for a misleading or missing page heading.
How do I write a meta description for SEO?
Use <meta name="description"> for a unique summary of that specific URL. Explain what the reader will find and, where appropriate, the practical outcome of visiting. Write natural sentences rather than a keyword list.
<meta name="description" content="Follow a safe, reversible workflow to rename a Git branch locally and on the remote, with commands for common errors.">Google sometimes uses this value for a result snippet, but may instead extract text from the page when that better matches the query. There is no guaranteed snippet length or guarantee that the supplied wording will appear. The official snippet guidance explains why page content still matters.
Which tags control crawling, indexing, and snippets?
Use directives only when you intentionally want to limit indexing or the amount of text shown in snippets. A crawler must be able to fetch the page to read a page-level directive.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Page-level robots directives
<meta name="robots" content="noindex,nofollow">
<meta name="googlebot" content="nosnippet,max-snippet:160">noindexasks a compliant crawler not to include the page in its index.nofollowadvises Google not to follow links on that page.nosnippetrequests no text snippet.max-snippetrequests a maximum text-snippet length.data-nosnippetcan mark particular text that should not be used in a snippet.
Use name="googlebot" when the instruction is specifically for Google’s crawler; name="robots" is the general form. The syntax and available controls are documented in Google’s robots meta tag and X-Robots-Tag specification.
HTTP headers for non-HTML files
For PDFs, images, and other responses that do not contain an HTML head, send an HTTP header instead:
X-Robots-Tag: noindexDo not block the same URL in robots.txt if you need Google to see a noindex or snippet directive. A crawl block can prevent the fetch, leaving the crawler unable to read the instruction; it does not necessarily remove an already known URL from search.
How do I add Open Graph tags for social sharing?
Open Graph describes a URL as an object for systems that consume the Open Graph protocol. Put the core properties in the head and keep them consistent with the page’s real content:
<meta property="og:title" content="HTML Meta Tags: Practical 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">
<meta property="og:description" content="Copyable metadata for search controls and social previews.">The Open Graph protocol defines title, type, image, and URL as core properties; its specification is at ogp.me. Treat these tags as sharing metadata, not as a replacement for the HTML title or a guaranteed Google ranking signal. Google may consider og:title when forming a title link, but social and search systems can still choose different text.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Do meta tags still matter for SEO?
Yes, but each tag has a limited job. Titles help systems understand and label a page, descriptions can supply a useful snippet, and robots directives can change indexing or snippet behavior when crawlers can read them. Open Graph improves the information available to sharing systems. None of these elements alone guarantees rankings, click-through rates, rich results, or the exact text shown to users.
Do not add the keywords meta tag
Google explicitly states: “The meta-keyword tag is not used by Google Search, and it has no effect on indexing and ranking at all.” Adding <meta name="keywords"> only creates maintenance work and can expose your content strategy without providing a Google benefit.
Do not rely on the lang attribute for Google language detection
Keep a correct lang attribute for accessibility and browser behavior, but Google says it does not rely on that HTML attribute to identify page language. Write the page itself in the intended language and provide accurate, localized titles and descriptions.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Metadata by purpose: a quick reference
| Markup | Main consumer | What it influences | Guarantee |
|---|---|---|---|
<title> |
Search engines, browsers | Candidate title for search results and browser tabs | No fixed display text; Google may rewrite it |
meta description |
Search engines | Candidate result snippet | Google may use page text instead |
robots/googlebot |
Crawlers | Indexing and snippet instructions | Only crawlers that can fetch the page can act on it |
X-Robots-Tag |
Crawlers | Equivalent controls for non-HTML responses | Depends on crawler access and compliance |
| Open Graph | Social-sharing consumers | Title, description, image, type, and URL for a shared object | Platform rendering is not guaranteed |
charset/viewport |
Browsers | Text decoding and responsive layout behavior | Browser behavior depends on valid delivery |
Why is Google showing a different title or description?
- Check the fetched HTML. View the production response, not only a client-side template or your source file. Confirm the intended tags are inside
<head>. - Compare the signals. Make the title, visible
<h1>, prominent copy, canonical URL, and Open Graph title describe the same page. Conflicting wording gives Google’s automated systems more reasons to substitute text. - Remove accidental directives. Search for
noindex,nosnippet, restrictivemax-snippet, and HTTPX-Robots-Tagheaders. - Allow crawling. Ensure authentication, firewalls, or
robots.txtrules are not preventing the crawler from retrieving the page. - Wait for recrawling. A corrected tag is not an instant instruction to every search result; Google must fetch and process the updated page.
Validate metadata before publishing
- Each indexable URL has one meaningful, page-specific title and description.
- The title, heading, description, and Open Graph values are factually consistent.
- All metadata is inside a valid head, with no
imgoriframeinserted before later tags. - Robots directives are intentional, and the page is crawlable if those directives must be seen.
- Open Graph URLs are absolute and point to the canonical page and a representative image.
- There is no
meta name="keywords"claim being used as an SEO tactic.
Or skip the browser setup
If you need to inspect how a page renders after its metadata, ScreenshotNeo can capture it with one request. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
Use the API examples in the ScreenshotNeo documentation (replace the URL with your page):
Best Value
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport 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}`);For metadata QA, useful options include full-page capture with lazy images loaded, a CSS-selector element capture, device presets or a custom viewport, dark mode, retina scale, waits for a selector or network idle, custom headers and cookies for authenticated pages, and caching with a TTL you choose. You can also block requests or resource types, inject custom CSS or JavaScript, click an element before capture, create PDFs, resize images, use signed links, submit asynchronous jobs with signed webhooks, capture up to 100 URLs per bulk call, and read usage through the usage API.
The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; Growth is $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000. Yearly billing gives two months free, and every feature is available on every plan. Create a free ScreenshotNeo account to start without a card.
Recommended Free Tools
Bottom line
Use a valid head, write unique titles and descriptions, reserve robots directives for deliberate indexing or snippet controls, and add Open Graph properties for sharing. Test the delivered HTML and remember that search engines and social systems may rewrite what users ultimately see.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
