WebsiteSettings
Home › Guides

Meta Tags, Favicons, and Social Previews

Updated 26 September 2026 · 5 min read

The HTML head is how browsers and social apps get a title, a description, a preview image, and the little icon on a tab. You can run a site without most of these tags; you cannot control how the site appears in a WhatsApp chat or a bookmark bar without them. This guide covers title and description, viewport, canonical, Open Graph and Twitter cards, favicons and a web app manifest, and how to test previews. Examples use example.com. No scripts, no tracking pixels required.

Title and description

The <title> is what appears on the tab and, often, as the main line in a search result. Keep it specific to the page. The homepage can be the business name plus a short offer. An inner page should lead with the page topic, then the name if space remains. Unique titles per URL beat a single slogan repeated everywhere.

<title>Opening hours and location | Example Cafe</title>
<meta name="description" content="Weekday and weekend hours, parking notes, and the Al Quoz address for Example Cafe.">

The description is a hint. Search engines may rewrite it. Write it anyway, in one or two sentences a human would read. Do not stuff keywords. Do not claim awards you do not have. Length is a judgment; if it truncates on a phone, put the point first.

Every indexable page should have its own pair. Thank-you pages can be noindex instead of competing with real pages; that pairing is discussed with robots.txt and XML sitemaps.

Viewport

Without a viewport tag, phones may pretend the screen is a wide desktop and shrink the whole page. The common tag is:

<meta name="viewport" content="width=device-width, initial-scale=1">

That tells the browser to use the device width. Do not disable zoom (user-scalable=no or a max-scale of 1) unless you have a tightly controlled exception; it hurts people who need to enlarge text. Viewport does not make a layout responsive by itself. Your CSS still has to wrap. It only stops the “tiny desktop” default.

Canonical URLs

A canonical tag says which URL is the preferred copy of this page:

<link rel="canonical" href="https://www.example.com/opening-hours/">

Use the final HTTPS host you chose (www or apex), with the trailing-slash rule you actually serve. If redirects already collapse HTTP and www, canonicals should match that destination, not the pre-redirect URL. Query strings used only for tracking should usually canonical to the clean URL. Faceted URLs that are not useful as their own pages should canonical to a parent or send noindex — pick one strategy and keep it.

Self-referential canonicals (the tag points at the page you are on) are normal and helpful when parameters get appended. Do not point every page at the homepage. That tells crawlers the inner pages are duplicates of home.

Open Graph and Twitter (X) cards

When someone pastes a link in many apps, the crawler looks for Open Graph tags. Twitter/X cards understand OG and some twitter-specific tags.

<meta property="og:type" content="website">
<meta property="og:title" content="Opening hours and location | Example Cafe">
<meta property="og:description" content="Hours, parking, and how to find us in Al Quoz.">
<meta property="og:url" content="https://www.example.com/opening-hours/">
<meta property="og:image" content="https://www.example.com/og/opening-hours.jpg">
<meta property="og:image:alt" content="Storefront of Example Cafe">
<meta name="twitter:card" content="summary_large_image">

The image should be a real JPEG or PNG on HTTPS, large enough to look sharp in a card (a common working size is 1200×630, but platforms differ). Do not use a 50-pixel logo on a huge canvas of whitespace if you can crop a photograph. Absolute URLs only; relative paths often fail in previews. Update og:title when the page title is too long for a chat card.

Apps cache previews aggressively. After you change an image, testers may still show the old one until you use the platform’s debugger or wait. A unique image URL (new filename) busts some caches.

You do not need every optional OG property. Skip fake og:site_name theatrics if the title already names you. Do not put a different offer in OG than on the page; that is a preview form of clickbait.

Favicons and the web app manifest

A favicon is the small icon in the tab and bookmarks. Browsers look for several names and sizes. A practical set:

  • A 32×32 (and often 16×16) ICO or PNG for classic tabs.
  • A 180×180 PNG for Apple touch icon if you care about home-screen saves.
  • An SVG icon if you have a simple mark that scales, with a PNG fallback.
  • A web app manifest JSON that names the app, colors, and icon list for Android-style “Add to Home Screen.”
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
{
  "name": "Example Cafe",
  "short_name": "Example",
  "start_url": "/",
  "display": "browser",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Keep the mark simple. A full photograph will turn to mud at 16 pixels. Serve icons over HTTPS. If you change the icon, rename the file; tabs cache favicons for a long time. display: browser is honest for a normal website; standalone is for apps that are ready to look like one.

Huge icon PNGs should still be compressed; they are part of website speed settings even though they are small on screen.

Other useful head tags

  • charset as UTF-8, early in the head, so Arabic and English both render.
  • Language on <html lang="en"> (or the real language of the page).
  • Theme-color if you want the mobile browser chrome to match a brand color.
  • RSS or atom rel="alternate" if you publish a feed.

Skip meta keywords. Skip half a dozen contradictory robots meta tags. One clear robots directive per page is enough when you need it.

Testing previews

  1. View source and confirm title, description, canonical, og:image as absolute HTTPS.
  2. Open the og:image URL in a private window; it must not 404 or redirect to a login.
  3. Use official preview debuggers when you have accounts for those platforms; they show what the crawler saw.
  4. Paste the URL into a test chat with yourself. Remember caches.
  5. Resize the browser to a phone width and check the tab title still makes sense.
  6. Add the page to bookmarks and see which icon appears.

If a debugger says “no image,” the cause is often a relative URL, a blocked robots path on /og/, or an image that is too small. Allow crawlers to fetch the image path even if you disallow some admin URLs.

Checklist

  • Unique title and description per indexable page, point first.
  • Viewport with device-width; do not disable zoom.
  • Canonical HTTPS URLs that match your redirect host.
  • OG title, description, url, and a real absolute preview image.
  • Favicon plus touch icon plus a small manifest if you support home-screen saves.
  • Previews tested after cache-busting the image filename when you change art.

Fix title, description, and og:image on the five pages people actually share. That is more useful than a perfect manifest on a page nobody links.

Related guides

General technical information; test changes carefully and keep backups of your settings.