Meta tags that matter on a product landing page

Google keeps a page listing the meta tags and attributes it supports. The ones a landing page is likely to use:

• description, a short summary that may be shown as the snippet.
• robots and googlebot, which control indexing and how the result is displayed.
• viewport. Google says its presence indicates that the page is mobile friendly.
• charset. Google recommends Unicode/UTF-8 where possible.
• google-site-verification, one of the ways to verify a site in Search Console.

The same page lists what Google doesn’t use:

• Meta keywords. In Google’s words, the tag “is not used by Google Search, and it has no effect on indexing and ranking at all.”
• The lang attribute. Google detects a page’s language from its text and says it doesn’t rely on code annotations such as lang. That’s no reason to remove the attribute, but don’t expect it to steer Google.
• rel="next" and rel="prev". No longer used, with no effect on indexing.

The blue link in a search result is what Google calls the title link. Your <title> is the first source for it, but Google’s title link documentation lists others it draws on: the main visual title on the page, heading elements such as <h1>, og:title, other prominent text, anchor text on the page, and the text of links pointing to the page.

Google names the situations where it tends to show something other than your title:

• Half-empty titles, such as a title that is only a separator and a site name because a template variable came back blank.
• Obsolete titles, where the title still carries last year’s date and the heading doesn’t.
• Inaccurate titles that don’t reflect what the page is about.
• Repeated boilerplate, where a group of pages share nearly the same title.
• No clear main title, when several large headings compete on the page.

So the practical rules are few. Give every page its own descriptive title. Avoid vague ones like “Home”. Don’t stuff keywords. Add your brand briefly at the start or end, separated by a delimiter. Make the visible <h1> agree with the title, because Google reads both.

Google states that there’s no limit on how long a <title> can be, and that the title link is truncated as needed, typically to fit the device width. Character counts you see quoted elsewhere, including the 50 to 60 our own checker suggests, are rules of thumb for avoiding truncation, not something Google publishes.

Google’s snippet documentation says it primarily uses the content of the page to build the snippet, and may use the meta description when that describes the page better. Snippets also change with the search, so one page can show different snippets for different queries. The description you write is a candidate, not a guarantee.

What Google asks for:

• A different description for each page, starting with the homepage and your most visited pages.
• A specific summary in sentences. Google warns that long strings of keywords don’t give people a clear idea of the page.
• Facts that help someone decide to click, such as a price or who the product is for.

As with titles, Google sets no length limit and truncates the snippet to fit. To limit or remove snippets, use the nosnippet or max-snippet robots rules, or put data-nosnippet on the parts of the page to exclude.

Canonical. A rel="canonical" link names the URL you want indexed when the same page is reachable at several addresses. Google only accepts it inside <head>, recommends absolute URLs, and recommends a self-referencing canonical on the canonical page itself (source). The ways this goes wrong are covered in canonical tag mistakes.

Robots. You don’t need a robots meta tag to be indexed. Google’s robots meta documentation gives the default as all, which has no effect when written out, so index, follow is optional. Add the tag only to restrict something: noindex, nosnippet, or limits such as max-snippet and max-image-preview. When rules conflict, the more restrictive one applies. A noindex left over from development is the costly mistake here, and the indexing guide covers how to find one.

Viewport and charset. Two lines every page should have. If you use Next.js, its docs say both are added by default even when a route defines no metadata (source).

Open Graph tags aren’t on Google’s supported list, although og:title is one of the sources for title links and og:site_name is one of the things Google considers for your site name (source). Their main job is the card that appears when someone shares your link.

The Open Graph protocol requires four properties on every page:

• og:title, the title as it should appear on the card.
• og:type. For a landing page, website.
• og:image, an image URL that represents the page.
• og:url, the canonical URL of the page. Use the same address as your canonical link.

og:description and og:site_name are optional in the protocol and worth adding. Without Open Graph tags, Meta says its crawler falls back to internal heuristics to guess the title, description and image (source), so the card is whatever the crawler guesses. Image sizes and caching have their own guide: Open Graph images.

X has its own twitter: tags, and they’re read beyond X: Slack’s crawler documentation lists Twitter Card tags next to Open Graph and oEmbed (source). The one to add is twitter:card. The example in the Next.js metadata reference sets it to summary_large_image (source), and the block below does the same.

Google shows a favicon next to results, and its favicon documentation is specific about what qualifies:

• A <link> tag in the head of your home page, with rel="icon", apple-touch-icon or one of the older variants.
• A square image of at least 8 × 8 pixels. Google recommends larger than 48 × 48.
• A format from Google’s list: BMP, GIF, ICO, PNG, JPEG, PPM or TIFF. If your only icon is an SVG, add a PNG or ICO as well.
• One favicon per hostname. A subdomain counts as a separate site.
• A stable URL that isn’t blocked in robots.txt, on a home page that is also crawlable.

Even then, Google says a favicon isn’t guaranteed to appear, and a new one can take from several days to several weeks to be picked up.

Replace the values, keep the URLs absolute, and send this in the HTML your server returns:

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

  <title>Recurring invoices for freelancers | Acme Invoices</title>
  <meta name="description" content="Send recurring invoices, get paid by card or bank transfer, and see who still owes you. From $9 a month.">
  <link rel="canonical" href="https://yoursite.com/">

  <meta property="og:type" content="website">
  <meta property="og:url" content="https://yoursite.com/">
  <meta property="og:site_name" content="Acme Invoices">
  <meta property="og:title" content="Recurring invoices for freelancers">
  <meta property="og:description" content="Send recurring invoices and see who still owes you.">
  <meta property="og:image" content="https://yoursite.com/og.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="The Acme Invoices dashboard with three unpaid invoices">

  <meta name="twitter:card" content="summary_large_image">

  <link rel="icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

Then check the result, on the live URL:

1. View the page source, not the browser’s element inspector. The inspector shows the page after JavaScript has run, and the source shows what the server sent.
2. Run the page through the meta tag checker. It loads the page as a crawler would, pulls out the title, description, canonical, robots rules, viewport, language, main heading and the Open Graph and Twitter tags, builds a card preview from them, and lists fixes with the serious ones first.
3. Do the same for one inner page. Templates often produce a correct homepage and the same title and description everywhere else.
4. Search for your brand once the page is indexed and compare the title link and snippet with what you wrote. If Google shows something else, go back through its list of causes above. Changes need a recrawl, which Google says can take a few days to a few weeks.