How to write meta tags and check the search and social preview

What each tag is for

Tag	Used for
<title>	The page title in browser tabs and, usually, the headline in search results
meta description	A summary that search engines may show under the title
link rel="canonical"	Which URL is the main version when the same content has several URLs
meta robots	Asking search engines not to index the page (noindex) or not to follow its links (nofollow)
Open Graph (og:*)	Title, description and image when the link is shared in chat apps and social networks
twitter:card	The card layout on X; X reads Open Graph title, description and image when its own tags are missing

Example: a bakery product page

1. Open the meta tag generator.
2. Under Basics, enter
   • Title: Sourdough bread | Hillside Bakery
   • Description: Our naturally leavened sourdough, baked every morning in small batches. Order by noon for same-day pickup.
   • Canonical URL: https://bakery.example/sourdough/
3. Leave both Show in search results (index) and Follow links on the page (follow) on. That is the default, so no robots tag is written.
4. In the Open Graph section, enter the Image URL (og:image) https://bakery.example/images/sourdough-1200x630.jpg, the Site name Hillside Bakery and Language and region en_US. Empty OG title, description and URL reuse the basic fields.
5. Choose the Card type summary_large_image for a large image on X.
6. Check the Preview (approximate) and the length indicators, then press Copy HTML and paste the code inside your page’s <head>.

The generated HTML:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sourdough bread | Hillside Bakery</title>
<meta name="description" content="Our naturally leavened sourdough, baked every morning in small batches. Order by noon for same-day pickup.">
<link rel="canonical" href="https://bakery.example/sourdough/">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Sourdough bread | Hillside Bakery">
<meta property="og:description" content="Our naturally leavened sourdough, baked every morning in small batches. Order by noon for same-day pickup.">
<meta property="og:url" content="https://bakery.example/sourdough/">
<meta property="og:image" content="https://bakery.example/images/sourdough-1200x630.jpg">
<meta property="og:site_name" content="Hillside Bakery">
<meta property="og:locale" content="en_US">

<!-- X (Twitter) card: title, description and image fall back to Open Graph -->
<meta name="twitter:card" content="summary_large_image">

Reading the preview

The search-result and social-card previews are approximations. Search engines decide themselves how much of a title or description to show, and may rewrite them from the page content; social apps each crop images differently. Use the preview and the length labels (Short, Within the rough limit, May be cut off) to spot text that is clearly too long or too short — not as a promise of how the page will appear.

The preview never downloads the image at your og:image URL. To see a picture in the card, choose an image on your device; it is used only for the preview and is not added to the code.

Tips for the text

• Put what the page is about first in the title, and keep it specific: Sourdough bread | Hillside Bakery is better than Home.
• Write a description for people: what they get on the page and why it is useful. Search engines do not use it as a ranking signal, but a clear one can make people more likely to click.
• Give every page its own title and description.

Common problems

• The social card shows an old title or image. Chat apps and social networks cache link previews. Some platforms offer a tool to fetch a page again; otherwise the update can take time.
• The image does not appear when shared. Use an absolute https:// URL that anyone can open without logging in. Around 1200 × 630 px suits most large cards.
• I used noindex but also blocked the page in robots.txt. If robots.txt blocks crawling, search engines cannot read the noindex tag. To remove a page from results, allow crawling and use noindex. See the robots.txt generator for what robots.txt can and cannot do.
• The canonical URL is relative or points to another site by mistake. Use the full URL of the main version of this page.
• Meta keywords. Major search engines ignore the keywords meta tag, so the generator does not output it.