Meta Tags for SEO: The Complete Guide (Title, Description, OG & More) | Sharkly

Meta tags are the part of your HTML that most people set up once and never think about again — but they're doing far more work than you realise. Here's everything you need to know: what each tag does, which ones Google actually uses, which ones it ignores, and how to write them correctly.

What are meta tags, and why do they matter for SEO?

Meta tags are snippets of HTML code that live in the <head> section of your web page — invisible to your visitors, but read by search engines, social platforms, and browsers. They communicate metadata about your page: what it's about, how it should be displayed in search results, whether it should be indexed, and how it should appear when shared on social media.

Some meta tags are direct ranking signals. Others influence how many people click on your result — which, through Google's Navboost system, is itself a ranking mechanism. Getting them right isn't just technical housekeeping. It's one of the highest-leverage, lowest-effort SEO actions you can take.

This guide covers every meta tag that matters for SEO — what each one does, exactly how to write it, and what Google actually does with it.

The title tag — your single most important on-page SEO signal

The title tag is not technically a meta tag (it's its own HTML element), but it is treated as part of the HTML head metadata and is universally included in any meta tag discussion — because it is the most important on-page SEO signal on your entire page.

Our research reverse-engineered Google's scoring system from its own patents. In the signal hierarchy, the title tag carries a confidence weight of 1.00 — the highest of any individual on-page signal. Nothing else on your page carries more SEO weight per character.

What the title tag does

Tells Google the primary topic of your page with the highest confidence of any signal
Appears as the blue clickable headline in Google search results
Appears in the browser tab when someone has your page open
Is used as the default link text when someone bookmarks your page

How to write a strong title tag

Put your primary keyword at the very start of the title. Google's scoring system assigns the highest confidence weight to terms appearing earliest in the title tag. "How to Unclog a Shower Drain" will outperform "5 Useful Tips for Shower Drain Unclogging" for that keyword — not because it sounds better, but because keyword position is a scored signal. Front-loading is not a style preference. It is an algorithm input.
Keep it between 50–60 characters. Google truncates titles that are too long — typically anything over ~580px in width. Aim for 55 characters to be safe. If your keyword and brand name together exceed that, drop the brand name from inner pages and reserve it for the homepage.
Every page on your site needs a unique title tag. Duplicate titles fragment your ranking signals and confuse Google about which page to rank for which query.
Promise only exactly what the page delivers. The title is your contract with the reader. If it overpromises — or is written to maximise curiosity rather than accurately describe the content — people will click and immediately bounce. See the Navboost warning below.
Don't keyword-stuff. "Plumber London | London Plumber | Plumbing London" will be rewritten by Google and may trigger a quality flag. One clear, front-loaded keyword is the correct approach.

The Navboost warning: clickbait titles actively hurt your rankings

This is one of the most important and underappreciated dynamics in title tag optimisation. A title that generates clicks but doesn't deliver on its promise creates what Google's patents call a short click — the user arrives, immediately decides the page isn't what they wanted, and hits the back button to try another result.

Google's Navboost system (US8595225B1 — confirmed as Google's most important ranking signal at the 2023 DOJ antitrust trial) tracks exactly this behaviour. It records good clicks (long dwell, user satisfied), bad clicks (quick return to SERP, user not satisfied), and last-longest clicks (the final click in a session — the strongest satisfaction signal). Pages that accumulate bad clicks get their Navboost score demoted for that query topic. Pages that accumulate good clicks get promoted.

The practical consequence: a clickbait title that temporarily inflates your CTR will generate a wave of bad clicks that suppresses your rankings over the following 13-month Navboost window. You are borrowing clicks from your future rankings. A title that accurately sets expectations, attracts the right readers, and delivers what it promises generates good clicks and last-longest clicks — which compound positively over time.

Write titles that attract the right people, not the most people.

Title tag format

<title>Primary Keyword: Compelling Description | Brand Name</title>

Example:

<title>How to Unclog a Shower Drain: 5 Methods That Actually Work | Sharkly</title>

One important note: Google sometimes rewrites your title tag in search results — especially if it determines your title doesn't accurately represent the page content, or if it's too long. The best way to prevent rewriting is to write a title that genuinely matches your page. Google rewrites titles that are misleading, stuffed, or mismatched with the content.

The meta description — your Navboost lever

The meta description is the short paragraph that appears beneath your title in search results. Here is the most important thing to understand about it: Google has confirmed it is not a direct ranking factor. Google does not use the meta description to decide where you rank.

So why does it matter enormously?

Because it determines whether people click on your result. And click-through rate is a direct input into Google's Navboost system — the user behaviour scoring mechanism confirmed as Google's most important ranking signal at the 2023 DOJ antitrust trial.

The research is explicit on this: "Title tags and meta descriptions are your Navboost input mechanism — they determine CTR. A/B test them systematically; improvements compound over 13 months." Navboost assigns topic-specific popularity scores based on real user click behaviour over a rolling 13-month window. A better meta description → more clicks → higher Navboost score → better rankings. It's indirect, but it's real, and it compounds.

How to write a strong meta description

A high-performing meta description has three components in a specific order: the primary keyword, a clear value proposition, and a call to action. Miss any one of them and you're leaving clicks on the table.

Include your primary keyword naturally — early. Google bolds keywords in the meta description that match the user's search query. This draws the eye and signals relevance at a glance. Put it in the first sentence, not buried at the end.
State a clear value proposition. You are competing for a click against nine other results. A summary of what your page is about is not enough. Tell the reader specifically what they will get, what problem it solves, or what they will be able to do after reading it. "Covers everything from X to Y" is a summary. "The only guide that explains X without requiring Y" is a value proposition.
End with a call to action — and make sure it fits. Phrases like "Learn how...", "Find out...", "See exactly how..." increase clicks without feeling pushy. Critically: Google truncates meta descriptions after approximately 160 characters (around 920px). If your CTA is the last element and the description runs long, it gets cut off — the reader never sees the most persuasive part. Write your CTA at 140–150 characters so it always survives truncation.
Every page needs a unique meta description. If you leave it blank, Google auto-generates one by extracting sentences from your page — usually the first paragraph, which is rarely optimised for clicks. On high-value pages, this is a significant missed opportunity.

A well-constructed meta description formula: [Primary keyword] + [what the page covers or solves] + [why it's worth clicking] + [CTA before 155 characters].

Example: "Meta tags for SEO explained from scratch — title tags, descriptions, canonical URLs, robots directives, OG and Twitter Cards. Everything in one place. Read the guide." (157 characters — keyword first, value prop in the middle, CTA at the end within the safe window.)

Meta description format

<meta name="description" content="Your compelling 150–160 character description. Include the keyword naturally and give the reader a reason to click." />

The meta robots tag — telling Google what to do with your page

The meta robots tag gives you direct control over how Google crawls, indexes, and follows links on your page. Unlike the title and description, this tag does not influence rankings directly — it controls whether a page is in the running at all.

The four most important directives

Directive	What it does	When to use it
`index`	Tells Google to include this page in the search index (default — you don't need to add this explicitly)	No action needed; this is the default behaviour
`noindex`	Removes this page from Google's search index entirely — it will not appear in any search results	Thank-you pages, admin pages, duplicate parameter variants, thin or low-quality pages you don't want dragging down your domain
`follow`	Allows Googlebot to follow links on this page and pass equity through them (default)	Default — most pages should use this
`nofollow`	Tells Googlebot not to follow links on this page — no link equity passes through them	Low-trust pages, UGC pages, affiliate disclaimers

Combined usage

<!-- Standard indexable page — you usually don't need to add this explicitly -->
<meta name="robots" content="index, follow" />

<!-- Remove from index entirely (thank-you pages, admin, duplicates) -->
<meta name="robots" content="noindex, nofollow" />

<!-- Index the page but don't follow links -->
<meta name="robots" content="index, nofollow" />

Important: The meta robots tag must be in the raw HTML of the page — not injected by JavaScript. Google processes the <head> tag before executing JavaScript. A noindex tag added via JavaScript may not be respected because it won't be present when Googlebot first reads the page.

For larger sites, the meta robots tag works alongside your robots.txt file and canonical tags as a three-layer indexation control system. They are not redundant — each operates at a different level. robots.txt controls crawling (can Google access the page?). The canonical tag controls which URL is preferred when duplicates exist. The meta robots noindex tag controls indexation (should this page appear in results at all?).

The canonical tag — solving the duplicate content problem

The canonical tag (rel="canonical") tells Google which version of a URL is the "official" one when multiple URLs serve the same or very similar content. It is one of the most important — and most misunderstood — technical SEO tags.

Why duplicate content is a serious problem

Duplicate content fragments your ranking signals. If three URLs serve the same content:

Backlinks pointing to each variant are split three ways instead of concentrated
Google has to decide which version to rank — and may choose the wrong one
Crawl budget is wasted on pages that add no unique value

Common duplicate content scenarios that need canonicalisation

https://example.com/page vs https://example.com/page/ (trailing slash)
http:// vs https:// versions
www. vs non-www. versions
/page?ref=facebook vs /page (UTM or tracking parameters)
/page?sort=price vs /page?sort=name (filtered or sorted category pages)
Paginated pages (/blog/page/2, /blog/page/3)
Syndicated content published on multiple sites

Canonical tag format

<!-- On the preferred version of the page (self-referencing canonical — always recommended) -->
<link rel="canonical" href="https://www.yoursite.com/your-page-slug" />

<!-- On a duplicate or variant URL, pointing to the preferred version -->
<link rel="canonical" href="https://www.yoursite.com/original-page-slug" />

Best practice: Every page on your site should have a self-referencing canonical — even the "original" version. This proactively prevents duplicate signals from accumulating if anyone links to or shares a parameter variant of your URL.

The meta keywords tag — ignore it completely

The meta keywords tag was used in the early 1990s, when search engines were primitive enough to take it at face value. Marketers abused it immediately — stuffing irrelevant keywords to manipulate rankings. Google stopped using it entirely, and has publicly confirmed this repeatedly for over 15 years.

<!-- This tag. Google ignores it completely. Don't waste your time. -->
<meta name="keywords" content="seo, search engine optimisation, google ranking" />

Not only does it do nothing for Google, it actively tells your competitors exactly which keywords you're targeting. Leave it out.

Bing technically still says it reads the tag, but the weight assigned to it is negligible. In 2024, optimising meta keywords is not a productive use of your time on any platform.

The meta viewport tag — mobile SEO foundation

The viewport tag is not a ranking signal in the traditional sense, but it is a non-negotiable part of mobile SEO. Google uses mobile-first indexing — meaning the mobile version of your page is what Google crawls, evaluates, and ranks. A page without a proper viewport tag will render incorrectly on mobile, produce a terrible user experience, and generate high bounce rates — which feeds directly into Navboost bad-click signals.

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

This single line tells browsers to match the screen width of the device and set the initial zoom level to normal. Every page on your site should have this. If you're using any modern CMS or framework, it's likely already there — but verify.

Open Graph tags — controlling how your pages look on social media

Open Graph (OG) tags were created by Facebook in 2010 and are now used by Facebook, LinkedIn, WhatsApp, Slack, Discord, iMessage link previews, and most other platforms that generate link previews. They have no direct SEO ranking value, but they influence click behaviour from social channels — and real traffic from real engaged users is itself a Navboost input.

Without OG tags, social platforms will attempt to auto-generate a preview from your page content — often pulling the wrong image, wrong title, or wrong description. OG tags give you full control.

The essential Open Graph tags

<!-- The title as it should appear in the social preview -->
<meta property="og:title" content="Your Page Title Here" />

<!-- The description for the social preview (can differ from meta description) -->
<meta property="og:description" content="A compelling description optimised for social sharing, not just search." />

<!-- The preview image — this is the most important OG tag -->
<meta property="og:image" content="https://www.yoursite.com/images/og-image-page-slug.jpg" />

<!-- The canonical URL of this page -->
<meta property="og:url" content="https://www.yoursite.com/your-page-slug" />

<!-- The type of content -->
<meta property="og:type" content="article" />

<!-- Your site name -->
<meta property="og:site_name" content="Your Brand Name" />

OG image specifications

Recommended size: 1200 × 630px
Minimum size: 600 × 315px (smaller images display as thumbnails, not full previews)
Format: JPG or PNG (JPG preferred for file size)
File size: Keep under 1MB — large images load slowly in previews
Text on image: Facebook recommends keeping text to under 20% of the image area
Use absolute URLs (including https://), never relative paths

Article-specific OG tags

If your page is a blog post or article, add these additional tags for richer previews on platforms that support them:

<meta property="article:published_time" content="2025-01-15T09:00:00Z" />
<meta property="article:modified_time" content="2025-06-01T09:00:00Z" />
<meta property="article:author" content="https://www.yoursite.com/team/author-name" />
<meta property="article:section" content="Guides" />

Twitter Card tags — controlling previews on X/Twitter

Twitter (now X) uses its own meta tag system called Twitter Cards. Most platforms now fall back to Open Graph if no Twitter-specific tags are present — but explicitly setting them gives you more control and access to richer card formats.

The essential Twitter Card tags

<!-- Card type: "summary_large_image" gives a full-width image preview -->
<meta name="twitter:card" content="summary_large_image" />

<!-- Your Twitter/X handle -->
<meta name="twitter:site" content="@YourBrandHandle" />

<!-- The author's handle (useful for articles) -->
<meta name="twitter:creator" content="@AuthorHandle" />

<!-- Title, description, and image can mirror OG tags or be customised -->
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="A compelling description for Twitter previews." />
<meta name="twitter:image" content="https://www.yoursite.com/images/og-image-page-slug.jpg" />

<!-- Required alt text for the image -->
<meta name="twitter:image:alt" content="Descriptive alt text for the preview image" />

Twitter Card types

Card Type	What it displays	Best for
`summary`	Small square thumbnail + title + description	Homepage, general pages
`summary_large_image`	Full-width hero image + title + description	Blog posts, articles, product pages
`app`	App store download card	Mobile app promotion
`player`	Embedded video/audio player	Video and podcast content

For most websites, summary_large_image is the correct choice. It generates a visual, attention-grabbing preview that significantly outperforms the small thumbnail format for click-through rates.

Putting it all together — the complete meta tag template

Here is the full, production-ready template for a typical blog post or article page. Copy this into your <head> section and replace the placeholder values:

<head>

  <!-- =====================================================
       CORE SEO META TAGS
  ====================================================== -->

  <!-- Character encoding — always first -->
  <meta charset="UTF-8" />

  <!-- Mobile viewport — required for mobile-first indexing -->
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Title tag: primary keyword first, 50–60 characters -->
  <title>Primary Keyword: Compelling Page Title | Brand Name</title>

  <!-- Meta description: 150–160 chars, keyword included, value proposition -->
  <meta name="description" content="Your 150–160 character description. Include the keyword naturally and give the reader a compelling reason to click your result over the others." />

  <!-- Canonical URL: always self-referencing on the original page -->
  <link rel="canonical" href="https://www.yoursite.com/your-page-slug" />

  <!-- Robots: only needed if NOT index/follow — the default is already index, follow -->
  <!-- <meta name="robots" content="noindex, nofollow" /> -->


  <!-- =====================================================
       OPEN GRAPH (Facebook, LinkedIn, WhatsApp, Slack, etc.)
  ====================================================== -->

  <meta property="og:type" content="article" />
  <meta property="og:title" content="Your Page Title Here" />
  <meta property="og:description" content="A compelling description for social sharing previews." />
  <meta property="og:url" content="https://www.yoursite.com/your-page-slug" />
  <meta property="og:image" content="https://www.yoursite.com/images/og-your-page-slug.jpg" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Descriptive alt text for the preview image" />
  <meta property="og:site_name" content="Your Brand Name" />
  <meta property="og:locale" content="en_US" />

  <!-- Article-specific (remove for non-article pages) -->
  <meta property="article:published_time" content="2025-01-15T09:00:00Z" />
  <meta property="article:modified_time" content="2025-06-01T09:00:00Z" />
  <meta property="article:author" content="https://www.yoursite.com/team/author-name" />
  <meta property="article:section" content="Guides" />


  <!-- =====================================================
       TWITTER CARD (X / Twitter)
  ====================================================== -->

  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@YourBrandHandle" />
  <meta name="twitter:creator" content="@AuthorHandle" />
  <meta name="twitter:title" content="Your Page Title Here" />
  <meta name="twitter:description" content="A compelling description for Twitter previews." />
  <meta name="twitter:image" content="https://www.yoursite.com/images/og-your-page-slug.jpg" />
  <meta name="twitter:image:alt" content="Descriptive alt text for the preview image" />

</head>

Quick reference: every meta tag and what it does

Tag	SEO Impact	Required?	Notes
`<title>`	Direct ranking signal — highest confidence weight (1.00) of any on-page element	Yes — every page	50–60 characters. Primary keyword first. Unique per page.
`meta description`	Indirect — influences CTR, which feeds Navboost	Yes — every page	150–160 characters. Unique per page. Value proposition, not just a summary.
`meta robots`	Controls indexation — not a ranking signal, but gates whether you rank at all	Only when needed	Default is index/follow. Only add when you need to change the default.
`link canonical`	Consolidates ranking signals across duplicate URLs	Yes — every page	Always self-referencing on originals. Points to preferred URL on duplicates.
`meta viewport`	Enables mobile rendering — required for mobile-first indexing	Yes — every page	Without it, mobile users get a broken layout → high bounce → bad Navboost signals.
`meta keywords`	None — Google ignores it completely	No	Skip entirely. It tells competitors your keyword strategy and does nothing else.
`og:title / og:description / og:image`	Indirect — controls social preview appearance, influences referral traffic quality	Recommended	1200×630px image. Absolute URLs only. Unique per page.
`twitter:card`	Indirect — enables rich social previews on X/Twitter	Recommended	Use `summary_large_image` for most pages. Falls back to OG if absent.

Common meta tag mistakes — and how to fix them

Mistake	The problem	The fix
Duplicate title tags across multiple pages	Google doesn't know which page to rank for which keyword — signals fragment	Audit with Screaming Frog or Search Console. Every page needs a unique title.
Title tag over 60 characters	Gets truncated in results — looks unprofessional, keyword intent is cut off	Keep to 55 characters to be safe. Front-load the keyword.
Clickbait or overpromising title	Inflates CTR short-term, but generates bad clicks (quick SERP returns) that suppress Navboost scores [US8595225B1] over the 13-month rolling window — actively worsening rankings over time	Titles must promise only what the page delivers. Attract the right readers, not the most readers.
Keyword buried at the end of the title	Lower keyword confidence weight — Google scores terms earlier in the title tag more heavily	Primary keyword in position one. Brand name at the end, or drop it entirely on inner pages.
No meta description	Google auto-generates one — often pulls a random sentence from the page that doesn't convert	Write a unique description for every page. Especially critical for money pages.
Meta description CTA after 160 characters	Truncation cuts off the most persuasive part — readers never see the call to action	Place your CTA at 140–150 characters. Keyword first, value proposition middle, CTA last — within the safe window.
Missing or wrong canonical tags	Ranking signals split across URL variants — site never reaches full authority potential	Add self-referencing canonicals to every page. Audit all parameter and variant URLs.
noindex on an important page	Page disappears from Google entirely — often set accidentally during development	Audit meta robots tags across your site. Check Search Console Coverage for accidentally de-indexed pages.
Relative URLs in OG tags	Social platforms can't resolve relative paths — previews break or show no image	Always use full absolute URLs including `https://` in all OG and Twitter Card image tags.
Same OG image for every page	Every page looks identical when shared — missed opportunity for targeted social previews	Create page-specific OG images, or at minimum category-specific ones. Blog template vs. product template vs. homepage.
Using meta keywords	Reveals keyword strategy to competitors; does nothing for rankings	Remove the tag entirely from all pages.

Based on "The Science of Google Search: A Complete SEO Dissertation" and "The Complete SEO System" — both grounded in 9 verified Google patents and 2023 DOJ antitrust trial testimony.

Meta Tags Explained: The Complete Guide to HTML SEO Signals (Title, Description, OG, and More)