Skip to content

The meta tags that matter for SEO and social sharing

By · Frontend & Web Development · 4 min read · Updated

Every HTML page carries a head section that most visitors never see, but search engines, social networks and messaging apps read it first. A few of those tags strongly affect how your page appears in search results and link previews; many others are obsolete or ignored. This guide covers the tags that matter, what each one does, the values that work, and which ones you can safely skip.

The title tag

<title>Unix Timestamp Converter: Epoch to Date | DevToolWorld</title>

The title appears in the browser tab, in bookmarks and, usually, as the clickable headline in search results. It is one of the strongest on-page signals of what a page is about.

  • Make each title unique across your site. Duplicate titles make pages compete with each other.
  • Put the most specific words first. Google truncates titles at about 600 pixels, roughly 50 to 60 characters.
  • Describe the page, not the brand alone. A site name at the end is fine.
  • Write for people. Search engines may rewrite titles they consider stuffed with keywords or misleading.

The meta description

<meta name="description" content="Convert Unix timestamps in seconds or milliseconds to readable dates, and dates back to epoch time.">

The description is not a ranking factor, but search engines often show it as the snippet under the title, so it strongly affects whether people click. Aim for around 150 to 160 characters, summarise what the page offers, and make it specific to the page. Google frequently replaces the description with text from the page when it matches the query better, which is another reason to write clear page content.

The canonical link

<link rel="canonical" href="https://example.com/time/unix-timestamp-converter/">

The same content is often reachable through several URLs: with and without a trailing slash, with tracking parameters, over HTTP and HTTPS, or under a print view. The canonical link tells search engines which URL is the preferred one, so ranking signals are consolidated rather than split.

  • Use absolute URLs, including the scheme and host.
  • Point to a URL that returns 200, not a redirect or an error.
  • Give every indexable page a self-referencing canonical; it guards against parameter variations you did not anticipate.

The canonical is a hint, not a command. If it contradicts other signals, such as internal links all pointing elsewhere, search engines may choose a different URL.

Robots directives

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

Without a robots tag, pages are indexable and links are followed, so you only need it for exceptions: noindex for search results pages, thank-you pages, staging sites and thin pages you do not want in search. Two traps: a noindex page blocked in robots.txt cannot be crawled, so search engines never see the noindex; and a noindex accidentally left in a production template can remove a whole site from search.

The viewport tag

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

This tells mobile browsers to use the device width instead of rendering a desktop-sized page zoomed out. Without it, responsive CSS does not work and mobile usability suffers, which affects mobile search. Do not disable zooming with user-scalable=no; it harms accessibility.

Charset and language

<meta charset="utf-8"> should be the first element in the head so the browser decodes the page correctly from the start. Set the page language on the html element, as in <html lang="en">, for screen readers, translation tools and search engines. For multilingual sites, use hreflang link tags to connect translations.

Open Graph tags for link previews

When someone shares a link on LinkedIn, Facebook, Slack, Discord, WhatsApp or iMessage, the platform fetches the page and builds a preview card from Open Graph tags:

<meta property="og:type" content="website">
<meta property="og:title" content="Unix Timestamp Converter">
<meta property="og:description" content="Convert epoch time to readable dates and back.">
<meta property="og:url" content="https://example.com/time/unix-timestamp-converter/">
<meta property="og:image" content="https://example.com/og/timestamp.png">
  • og:image makes the biggest difference. Use an absolute HTTPS URL, 1200 by 630 pixels, under about 5 MB, and keep important text away from the edges because platforms crop differently.
  • og:title can be shorter and punchier than the HTML title, since the site name usually appears elsewhere on the card.
  • og:url should match the canonical URL.

Twitter (X) card tags

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

X reads Open Graph tags as a fallback, so in practice you only need twitter:card to select the large image layout. Add twitter:title or twitter:image only if you want them to differ from the Open Graph values.

Tags you can skip

  • meta keywords: ignored by Google for over a decade, and it reveals your keyword strategy to competitors.
  • meta revisit-after, rating, distribution: not used by major search engines.
  • meta author: harmless and occasionally used by some tools, but it has no effect on ranking.

Mistakes that break previews and indexing

  • Relative image URLs. og:image must be an absolute https:// URL. A path like /img/card.png works in the browser and produces a preview with no image.
  • Every page canonical to the home page. A template that hard-codes one canonical URL tells search engines that all your pages are duplicates of it.
  • A leftover noindex from a staging environment, shipped to production. Check the live page source after every launch.
  • Identical titles and descriptions across many pages, which makes them compete with each other in results.

Checking your tags

  1. View the page source rather than the inspector. Many crawlers and nearly all social preview bots do not run JavaScript, so tags added by client-side code may be invisible to them.
  2. Use the platforms' own debuggers, such as LinkedIn's Post Inspector and Facebook's Sharing Debugger. They show what was fetched and let you refresh their cache after changes.
  3. Check search appearance in Google Search Console, which reports duplicate titles, canonical choices and indexing status.

The Meta Tag Generator creates a complete set of these tags from a short form, with character counts and a preview of the search result. If you need to inspect the tags a live page already has, format its HTML with the HTML Formatter and read the head section.