Search and sharing

What do search engines read from my HTML?

Google, Bing and the rest fetch your HTML, render it with a headless browser, and pull out the main content. A few elements get extra weight. The <title> is the strongest signal for what the page is about and usually becomes the blue headline in results. The meta description often becomes the snippet below it. Headings, link text, alt text and the words in your opening paragraphs explain the topic further.

Crawlers do run JavaScript, but rendering is queued and can lag the first crawl. Content that only appears after a script runs, or after a click, may be indexed late or missed. Putting the main text in the server-sent HTML is the safe choice.

No tag makes a weak page rank. Clear, honest, well-structured HTML is most of the technical work. The rest is writing something people want to find.

How should I write the title?

Give every page a unique <title>. Lead with the specific topic and end with the site name, because results and browser tabs cut from the right. Around 50 to 60 characters fits on most screens. Google measures by pixel width, so a title of wide capital letters gets cut sooner.

Search engines rewrite titles when they look stuffed, duplicated, or mismatched with the page. A title of "Home" or the same "Crumb Kitchen | Recipes" on 200 pages invites a rewrite, often using your <h1> instead. Matching the title and the <h1> in meaning (not word for word) is the most reliable way to keep yours.

The title also names the browser tab, the bookmark and the screen reader announcement when the page loads. A good title helps all of those.

<title>Sourdough starter in 7 days | Crumb Kitchen</title>
<!-- Avoid: -->
<title>Home</title>
<title>Bread, sourdough, starter, recipe, flour, best sourdough</title>

Does the meta description still matter?

It has no direct effect on ranking. It is often the snippet people read before deciding to click. Write 120 to 155 characters that tell a searcher what they get. Mention a concrete detail, such as the number of steps, the price or the location.

Google picks a snippet from the page text when it thinks that matches the query better, so a page can show different snippets for different searches. Pages without a description get an extract, which may start mid-sentence. Every page should have its own description. Copying one description across the whole site is worse than leaving it out.

The keywords meta tag is ignored by Google and Bing and has been for over a decade. Leave it out.

<meta name="description" content="Make a sourdough starter from flour and water in 7 days, with photos of each stage and fixes for a sluggish jar.">

What does a canonical link do, and when do I need one?

The same content is often reachable at several URLs: with ?utm_source=newsletter, with and without a trailing slash, over http and https, or as a print view. Search engines treat each as a separate page and pick one to show. The <link rel="canonical"> element tells them which one you prefer and asks them to pool ranking signals there.

Use an absolute URL. Point each page at itself (a self-referencing canonical) so tracking parameters collapse back to the clean address. Only point at a different URL when the page really is a duplicate of it.

A canonical is a strong hint, which search engines may override if the pages differ a lot. Do not use it to merge pages with different content, like page 2 of a list onto page 1. Each page of a paginated list should be canonical to itself.

<link rel="canonical" href="https://crumb.example/sourdough-starter">

How do I keep a page out of search results?

Add a robots meta tag with noindex. Use it for thank-you pages, internal search results, staging copies and thin tag pages. Add nofollow only if you also want crawlers to ignore the links on the page, which is rarely what you want.

The crawler has to fetch the page to see the tag. If robots.txt blocks the URL, the tag is never read, and the URL can still appear in results if other sites link to it. Leave the page crawlable and use noindex. Use robots.txt for controlling crawl load, not for hiding pages.

Anything private belongs behind a login. A noindex tag hides a page from results and does nothing to stop someone who has the link.

<meta name="robots" content="noindex">

How do link previews in chat apps and social sites work?

When someone pastes your URL into Slack, WhatsApp, iMessage, LinkedIn or Mastodon, the app fetches the page and reads Open Graph tags from the <head>. Those give the preview title, description, image and canonical URL. Without them the app guesses, often picking a logo or the first image it finds.

Open Graph tags use the property attribute, while most other meta tags use name. The og:image must be an absolute URL that is publicly reachable. An image around 1200 by 630 pixels with important content kept away from the edges works on most services, since some crop to a square.

Add twitter:card with the value summary_large_image to get a large card on X. X falls back to Open Graph for title, description and image, so you rarely need duplicates.

Previews are cached. After changing tags, use the platform's debugger, such as the Facebook Sharing Debugger or the LinkedIn Post Inspector, to force a re-fetch.

<meta property="og:title" content="Sourdough starter in 7 days">
<meta property="og:description" content="Two ingredients, one jar, a week of patience.">
<meta property="og:image" content="https://crumb.example/img/starter-1200.jpg">
<meta property="og:image:alt" content="A bubbly starter in a glass jar">
<meta property="og:url" content="https://crumb.example/sourdough-starter">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">

Should I add structured data?

Structured data describes the page in a machine-readable vocabulary, usually schema.org written as JSON-LD inside a <script type="application/ld+json">. Search engines use it for rich results: recipe cards with cooking time, event dates, product prices, breadcrumb trails.

Add it when your content fits a type that search engines show as a rich result, such as Recipe, Event, Product, Article or LocalBusiness. It must describe what is visible on the page. Marking up reviews that do not exist or an event that is not on the page can get the markup ignored or the site penalised.

Check it with Google's Rich Results Test or the Schema Markup Validator. Both show which properties were found and which are missing.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Recipe",
  "name": "Sourdough starter",
  "totalTime": "P7D",
  "recipeIngredient": ["500 g wholemeal flour", "500 ml water"]
}
</script>

Which other HTML details affect search?

• Set <html lang> correctly. Search engines use it with other signals to serve the page to the right language audience.
• Use descriptive link text. "Read our sourdough guide" tells a crawler what the target is about. "Click here" tells it nothing.
• Write real alt text on content images. It is how image search understands them.
• Use crawlable links: <a href="/menu">. A <span> with a click handler that changes the URL is not a link to a crawler.
• Include the viewport meta tag. Google indexes the mobile rendering of your page, so a page that breaks on phones is judged on its broken version.
• Add hreflang alternates with <link rel="alternate" hreflang="fr"> when the same page exists in several languages.

How do I check what search engines and apps see?

Open view source, not the Elements panel, to see the HTML the server sends. That is what a crawler gets before rendering. Confirm the title, description, canonical and Open Graph tags are there and not added later by a script.

Google Search Console's URL Inspection tool shows the rendered HTML and whether the page is indexed, and it tells you which canonical Google chose. Lighthouse in Chrome DevTools has an SEO category that checks basics like a missing description, a blocked page or tiny tap targets.

When reviewing AI-generated pages, look for a generic title copied to every page, a missing or placeholder description, relative og:image URLs, Open Graph tags written with name, a keywords tag, and a canonical that points every page at the home page. That last one tells search engines to drop all your other pages.

Field notes

• Each page needs its own clear <title>, which shows in results and browser tabs.
• A meta description often becomes the snippet people read before they click.
• Open Graph tags control the preview card when someone shares your link.

Easy to get wrong

Open Graph tags use the property attribute. Some parsers ignore them under name.

Relative canonicals are easy to get wrong across hosts and protocols. Use the full absolute URL.

Major search engines ignore the keywords tag. A good description is worth the effort instead.

Questions people ask

How long should a meta description be?

Roughly 120 to 155 characters. Longer text is usually cut off in results.

Is it bad to have more than one h1?

It is valid HTML, but one clear h1 per page makes the structure easier for people and search engines to follow.

What is a canonical tag?

A <link rel="canonical"> in the head that names the preferred URL for content reachable at several addresses.

What size should an Open Graph image be?

About 1200 by 630 pixels is a safe choice that displays well on most platforms.