Custom HTML can supply the title and description used in search or social previews; CSS generally cannot. Put descriptive metadata in the document’s <head>, and put meaningful page text in the HTML body. Search engines and sharing platforms decide how to interpret those inputs and render a preview, so the result is not always identical to the text you supplied.
Can HTML and CSS change a metadata preview?
HTML can provide metadata values that a consuming system may use. For Google Search, examples include the page title and meta description in the document head. A content management system may expose those fields through its own settings instead of requiring you to edit the HTML directly. Google describes meta tags as inputs processed by clients, which ignore tags they do not support (Google’s supported meta tags and attributes).
CSS controls presentation of rendered page content; it does not generally set metadata values. In particular, text generated with CSS’s content property is not part of the DOM, and Google Search says it ignores that text. If a title or description matters to a preview, put it in the appropriate metadata field or in actual HTML text—not solely in a CSS pseudo-element (Google’s SEO guide for web developers).
There are two related but different questions: what information is available for a system to use, and what that system chooses to show. You can author the inputs; you generally cannot force every search engine, social network, or messaging app to render the same preview.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
How to add metadata in the page head
For a page you control, add a useful title and description inside a valid HTML document’s <head>. Replace the sample copy with accurate details about the specific page. The title element is not a meta tag, but it is a key page title input.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Choosing a Home Router | Example Guide</title>
<meta name="description" content="Compare the features that matter when choosing a home router, including coverage, Wi-Fi standards, and security updates.">
</head>
<body>
<main>
<h1>Choosing a Home Router</h1>
<p>This guide explains the factors to consider when selecting a router for your home.</p>
</main>
</body>
</html>The page body should substantiate the metadata: a description that promises a comparison should lead to a page that actually compares the relevant options. Keep the content useful to people reading the page, not just to preview systems.
If a CMS generates the HTML
Use the CMS’s supported SEO or page-settings interface to set the title and description. The exact controls depend on the CMS and any installed extensions, so do not assume that adding a second set of tags in a theme or custom code is necessary. Inspect the published page’s source or rendered output to confirm that the intended values appear in the head and are not duplicated or replaced.
Keep the head valid
Google documents title, meta, link, script, and style as valid elements in the head for metadata purposes. Invalid markup can affect how later metadata is read. Keep page metadata in the head, use properly closed and nested elements, and avoid placing body content before the head is complete. See Google’s guidance on valid page metadata.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Why the preview may not match your description
A meta description is an input, not a command that guarantees an exact snippet. Google may use the description when it considers it more accurate than text from the page, but it may instead generate snippet text from page content that is more relevant to a particular search query. The same page can therefore appear with different snippet text for different searches. Google explains this behavior in How to write meta descriptions.
Write a concise, accurate description that helps a reader understand the page, but make the visible content strong enough to stand on its own. Do not rely on CSS-generated text to supply important information: it is not DOM content and Google Search says it ignores it. Also, Google may truncate title links or select alternate title text when the supplied page title is a poor match for the language or writing system of the main page content. See Google’s documentation on influencing title links.
Search previews and social previews use different inputs
Search and social sharing are not one universal preview system. Google Search documents its own treatment of page titles, descriptions, and snippets. For social metadata, the Open Graph protocol defines properties for describing a web page object, including og:url and og:description (Open Graph protocol).
A basic Open Graph example can sit alongside the page’s search metadata:
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →<meta property="og:url" content="https://example.com/guides/home-router">
<meta property="og:description" content="Compare the features that matter when choosing a home router.">These fields describe the object using Open Graph vocabulary; they do not make CSS a metadata source. The platform receiving the page determines how it processes available fields and renders its preview. The cited documentation establishes the vocabulary, not a current, universal rule for every social network or messaging app.
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
When snippet controls are appropriate
Google documents robots metadata and the data-nosnippet attribute as controls affecting snippet eligibility or which page text may be used. They are not tools for forcing a preferred description to display. Use them only when you intend to limit preview content, and account for the fact that they work only when Google can crawl the page. Read Google’s robots meta tag specifications before applying them.
- Want a useful preview? Provide accurate metadata and useful visible page content.
- Want to prevent a section from appearing in a snippet? Consider the documented snippet controls and verify that the crawler can access the page.
- Want a specific sentence to appear for every query? A description cannot guarantee that outcome in Google Search.
How to check what you published
- Inspect the page source or CMS output. Confirm that the intended title and description are actually present in the published document’s head. Check for duplicate or stale values if a theme, plugin, or CMS also generates metadata.
- Validate the markup. Make sure the head structure is valid and metadata elements are in the correct location; malformed markup can interfere with interpretation.
- Check the visible page. Confirm that its main text supports the title and description and includes important information as real HTML content rather than CSS-generated content.
- Check crawl access if using snippet restrictions. A directive cannot affect Google’s snippet selection if Google cannot crawl the page.
- Allow for selection by the consumer. A preview that differs from your description does not by itself prove the tag is absent: Google may prefer query-relevant page text. Other consumers have their own behavior.
Common problems and fixes
| Symptom | Likely issue | What to do |
|---|---|---|
| The preview shows old or unexpected wording. | The published head may contain outdated or duplicate metadata, or Google may select page text for the query. | Inspect the published output, correct the actual metadata source, and make the visible page text accurate. Remember that a supplied description does not guarantee the snippet. |
| Text appears on the page but not in a search snippet. | The text may be generated only with CSS, or Google may choose other relevant text. | Put important information in the HTML DOM or an appropriate metadata field; do not depend on CSS content. |
| Later metadata appears to be ignored or misread. | Invalid head markup may affect how subsequent metadata is read. | Correct the HTML structure and use valid metadata elements in the head. |
| A snippet restriction has no apparent effect. | The crawler may not be able to access the page, or the restriction may not be configured as intended. | Confirm crawl access and check the directive against Google’s robots and snippet-control documentation. |
| A social share does not look like a Google result. | The recipient platform consumes its own inputs and controls its own rendering. | Provide appropriate Open Graph fields where relevant, then treat the receiving platform’s presentation as separate from Google Search. |
Or skip the browser setup
If you want a screenshot of the page as rendered in a browser, ScreenshotNeo can return one with a single GET request. A screenshot can help you inspect visible page rendering; it does not set metadata or guarantee what a search engine or social platform will show. ScreenshotNeo accepts consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. It also has an MCP server for AI agents, and its free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Details and options are in the ScreenshotNeo documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee ScreenshotNeo for the service, or sign up for 1,000 free screenshots a month with no card.
Recommended Free Tools
Frequently Asked Questions
Does changing CSS change the meta description?
No. Change the meta description in the document head or the CMS field that generates it; CSS styles presentation and CSS-generated text is not a replacement for metadata.
Will Google always display the meta description I wrote?
No. Google may use it when it is a good match, or choose page text that better fits a specific query.
Does Open Graph control Google Search snippets?
Open Graph provides a separate vocabulary for describing page objects. The cited documentation does not establish it as a way to control Google Search snippets.
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.
