Meta tags are HTML elements in a web page’s <head> area carrying information about the page rather than displaying visible content. They address search engines, browsers and social media platforms: which title should appear in the tab bar and in Google results? Which description in the SERP snippet? Which preview image when sharing on LinkedIn or Facebook? Should this page be indexed at all? As a website operator, meta tags let you control your self-presentation towards external services – measurably influencing visibility, click-through rate and findability. From an SEO perspective, they’re among the most important levers of every single page.
Where do meta tags live in the HTML?
Meta tags live exclusively within an HTML document’s <head> element, i.e. before the <body> and thus before the actual page content. They’re self-closing and have no text content, consisting exclusively of attributes:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Agency Stuttgart | aceArt GmbH</title>
<meta name="description" content="Web agency from Stuttgart …">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://www.aceart.de/">
</head>
Strictly speaking, <title> is not a meta tag, but functionally it belongs to the same family and is usually mentioned alongside them in everyday SEO.
The most important meta tags at a glance
The title tag
The title is the most important single factor of on-page optimisation. It appears in the browser tab, in bookmarks and (most importantly) in the search engine results as the clickable headline.
<title>Custom Software Agency Stuttgart | aceArt GmbH</title>
Recommendation: 50–60 characters. Google truncates longer titles; too-short titles waste keyword real estate.
The meta description
The description supplies the preview snippet below the title in the SERP. It’s not a direct ranking factor but significantly influences the click-through rate.
<meta name="description" content="Custom software development for companies from Stuttgart and the surrounding region, since 2014.">
Recommendation: 140–160 characters, distinct keywords, a clear value proposition, ideally a call to action.
Meta robots
Controls how search engines handle the page. Common values:
| Value | Meaning |
|---|---|
index, follow | Default – index the page, follow the links |
noindex | Don’t include the page in the index |
nofollow | Do not follow links on this page |
noindex, nofollow | Take the page out of the SEO cycle entirely |
noarchive | Google shouldn’t show a cache link |
max-snippet:0 | Limit the snippet length |
<meta name="robots" content="noindex, follow">
For individual crawlers, the instruction can also be set specifically, e.g. <meta name="googlebot" content="noindex">.
The meta viewport
Ensures mobile browsers display the page at full device width, a prerequisite for every responsive website. Without the tag, mobile Safari shows the page shrunk to 980 px width.
<meta name="viewport" content="width=device-width, initial-scale=1">
More background in the glossary entry on viewport.
Meta charset
Defines the character encoding, practically always UTF-8 today. Should sit as high in the <head> as possible, ideally as the first element.
<meta charset="UTF-8">
Meta keywords (outdated)
Website operators used to list associated keywords here:
<meta name="keywords" content="web agency, stuttgart, custom software">
Google has explicitly ignored this tag since 2009 because of massive abuse (keyword stuffing). Other search engines treat it similarly. Today the tag has practically no significance and can be omitted.
Open Graph: previews on social networks
Open Graph (OG) was introduced by Facebook in 2010 and is today the de facto standard for link previews on Facebook, LinkedIn, WhatsApp, Slack, Discord, Microsoft Teams and many other platforms. OG tags look like normal meta tags but use the property attribute instead of name:
<meta property="og:title" content="Web Agency Stuttgart | aceArt">
<meta property="og:description" content="Tailor-made software development since 2014.">
<meta property="og:image" content="https://www.aceart.de/og-image.png">
<meta property="og:url" content="https://www.aceart.de/">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
Important for og:image: 1200 × 630 pixels in JPG or PNG format, under 8 MB, is recommended. Without an OG image, the platform grabs the first image it finds on the page, rarely the desired result.
Twitter Cards
Twitter (today X) additionally uses its own meta tags for link previews. Where none exist, the platform falls back on Open Graph.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Web Agency Stuttgart | aceArt">
<meta name="twitter:description" content="Tailor-made software development since 2014.">
<meta name="twitter:image" content="https://www.aceart.de/og-image.png">
The twitter:card value determines the format: summary (small preview), summary_large_image (full preview image), app (app promotion) or player (video).
Related head elements (not meta tags in the narrow sense)
The canonical URL
Even though <link rel="canonical"> is technically a <link> tag, it belongs in the same toolkit. It tells search engines which URL is the canonical version of a page, essential with duplicate content, filter parameters or different path variants.
<link rel="canonical" href="https://www.aceart.de/leistungen/seo">
Hreflang
For multilingual websites, hreflang signals which language version belongs to which market:
<link rel="alternate" hreflang="de" href="https://example.com/">
<link rel="alternate" hreflang="en" href="https://example.com/en/">
The favicon
Likewise declared via <link>; provides the small icon in the browser tab and in bookmarks:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Best practices for SEO-relevant meta tags
- Title and description individually per page: no auto-fill from the site name, but targeted wording for every URL.
- Aim at a concrete search intent: title and description should make clear what the page answers.
- Respect the lengths: title 50–60 characters, description 140–160 characters. Pixel-based tools (e.g. the SISTRIX SERP snippet generator) show truncation risk.
- Open Graph for every shareable page: at least
og:title,og:description,og:image,og:url. - Set a canonical even when the URL is unambiguous: protects against accidental duplicates (e.g. via parameter URLs).
viewportandcharsetare mandatory: no mobile layout without viewport, character chaos without charset.noindexwith care: once deindexed, an accidentally non-indexed page can need weeks to rank again.- Add structured data: JSON-LD (
BreadcrumbList,Article,FAQPage…) isn’t a classic meta tag but belongs in the same optimisation repertoire. See the glossary entry on breadcrumb.
Tools for checking meta tags
- Google Rich Results Test: validates structure and meta tags
- Google Search Console: shows how Google indexes the page
- Facebook Sharing Debugger: preview and cache refresh for OG tags
- LinkedIn Post Inspector: the analogous function for LinkedIn
- Browser DevTools: check the
<head>in the elements panel via Copy → Outer HTML - metatags.io: an all-in-one tool for preview and generation
Frequently asked questions about meta tags
Are meta tags a ranking factor?
It’s nuanced: the <title> is a direct ranking factor. The description isn’t; it only influences the click-through rate. meta robots controls indexing, making it indirectly ranking-decisive. meta keywords has no influence any more.
How many meta tags should a page have?
As many as necessary, as few as possible. Mandatory: charset, viewport, title, description. Recommended: the Open Graph set, canonical, robots. Optional: Twitter Cards, hreflang, favicon links.
What happens if I omit the title or description? Google then generates one automatically from the page content. The result is usually generic and poorly clickable. Manual care is always better.
How do I notice that my meta tags are taking effect? In Google Search Console under “URL inspection” you can see the indexed state. For Open Graph, the Facebook Sharing Debugger helps. You can also force a cache reset there if the platform still shows an old version.
What’s the difference between meta name= and meta property=?
Classic meta tags use name="…" (description, robots, viewport). Open Graph uses property="…" (og:title, og:image). Twitter Cards are again name="twitter:…". This mixed form grew historically – simply adopt it as is.
Conclusion
Meta tags are small and invisible, but a website’s visibility, click-through rate and social media impact can hardly bypass them. Maintain title, description, Open Graph and robots instructions deliberately per page and you’ll get considerably more out of every single URL than most competitors. We’re happy to support you with designing a clean meta tag strategy and its technical implementation in your CMS – just drop us a line for a first assessment.