The Ultimate Guide to Meta Tags in 2026: Master SEO for Your Website

1. Title Tag Critical

The title tag is the headline that appears in Google search results, browser tabs, and bookmarks. Of all meta tags, this is the most important for SEO rankings and click-through rates.

Code example

<title>Web Design Kenya | Custom Websites with M-Pesa | WPfoss</title>

Best practices

• Keep it between 50 and 60 characters (Google truncates longer titles)
• Put the primary keyword near the beginning
• Include your brand name at the end (separated by | or -)
• Write a unique title for every page
• Match the searcher's intent
• Make it compelling enough to click, but not clickbait

Common mistakes

• Using the same title on multiple pages (called keyword cannibalisation)
• Stuffing too many keywords
• Leaving the default "Untitled Document" or CMS placeholder
• Writing titles for search engines instead of humans

2. Meta Description Critical

The meta description is the short text that appears under the title in search results. It does not directly affect rankings, but it is the single biggest factor in whether someone clicks your result over a competitor's.

Code example

<meta name="description"
  content="Custom web design in Kenya with M-Pesa checkout
  and SEO foundation. From KSh 50,000. Trusted by businesses
  across Nairobi and beyond.">

Best practices

• Keep it between 150 and 160 characters (mobile shows around 120)
• Include the primary keyword naturally
• Write a clear value proposition
• Use active voice and action words
• Write a unique description for every page
• Match search intent (informational, commercial, transactional)

Common mistakes

• Leaving it blank (Google then generates one, often poorly)
• Duplicating descriptions across pages
• Keyword stuffing
• Writing vague, generic descriptions that could apply to any page

3. Canonical Tag Critical

The canonical tag tells search engines which URL is the "master" version when similar or duplicate content exists at multiple URLs. This prevents Google from splitting ranking signals across duplicates.

Code example

<link rel="canonical" href="https://wpfoss.ke/web-design-kenya">

Best practices

• Add to every page, pointing to itself in most cases
• Use the absolute URL (https://example.com/page), not relative paths
• Use the preferred version (HTTPS, no trailing slash conflict, no parameters)
• For paginated content, canonical to the relevant page, not page 1
• For syndicated content, canonical back to the original source

Common mistakes

• Pointing every page's canonical to the homepage (kills indexing of inner pages)
• Forgetting to update canonicals after a URL structure change
• Using both canonical and noindex on the same page (conflicting signals)

4. Meta Robots High Impact

The robots meta tag controls how search engines crawl and index a page. Use it to keep specific pages out of search results, prevent indexing of admin pages, or control how snippets are generated.

Code examples

<!-- Default: index this page, follow its links -->
<meta name="robots" content="index, follow">

<!-- Hide from search results but follow links -->
<meta name="robots" content="noindex, follow">

<!-- Hide from search and ignore links -->
<meta name="robots" content="noindex, nofollow">

<!-- Allow indexing but no preview snippet -->
<meta name="robots" content="index, follow, nosnippet">

Common directives

• index / noindex: allow or block indexing
• follow / nofollow: pass or block link authority
• noarchive: prevent cached versions
• nosnippet: prevent text snippets in results
• noimageindex: prevent images on the page from being indexed
• max-snippet:[number]: limit snippet length

Common mistakes

• Accidentally adding noindex to pages you want ranked
• Blocking pages in robots.txt that have noindex (Google cannot see the tag)
• Forgetting to remove noindex tags after a site relaunch

5. Hreflang Tag Medium Impact

Hreflang tells search engines which language and regional version of a page to show users. Essential for sites serving multiple countries or languages.

Code example

<link rel="alternate" hreflang="en-ke" href="https://example.com/ke/">
<link rel="alternate" hreflang="en-us" href="https://example.com/us/">
<link rel="alternate" hreflang="en-gb" href="https://example.com/uk/">
<link rel="alternate" hreflang="x-default" href="https://example.com/">

Best practices

• List all language and regional versions on every page
• Include an x-default tag for the fallback version
• Use proper ISO codes (en-KE for English Kenya, en-US for English US)
• Mutual hreflang: page A points to B, page B points back to A

6. Charset Tag High Impact

Specifies the character encoding for the page. Without this, special characters and non-English text may display as gibberish.

Code example

<meta charset="UTF-8">

Best practices

• Always use UTF-8 (universal standard)
• Place it as the first tag inside <head>
• Required on every page

7. Viewport Tag Critical for Mobile

Controls how the page is displayed on mobile devices. Without this, your site will look broken on phones and Google will not consider it mobile-friendly.

Code example

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

Best practices

• Required on every page
• Use width=device-width to adapt to screen size
• Use initial-scale=1.0 to set default zoom
• Avoid disabling zoom with user-scalable=no (hurts accessibility)

Without this tag, your site will fail Google's mobile-friendly test and lose rankings. Non-negotiable in 2026.

8. Meta Refresh Redirect Use Sparingly

Redirects users to another URL after a delay. Mostly outdated, server-side 301 redirects are preferred for SEO.

Code example

<meta http-equiv="refresh" content="5; URL=https://example.com/new-page">

Best practices

• Use server-side 301 redirects instead whenever possible
• Only use meta refresh when you have no server-side access
• Set delay to 0 if you must use it (avoid frustrating users)

9. Theme Color Mobile Polish

Sets the colour of the browser toolbar on mobile devices, particularly Chrome on Android. Small but adds visual polish to your brand.

Code example

<meta name="theme-color" content="#00A86B">

10. Open Graph Tags High Impact

Open Graph was created by Facebook and is now used by Facebook, LinkedIn, WhatsApp, Slack, Discord, and most other platforms. Without these tags, your shared links look broken or generic.

Code example

<meta property="og:title" content="Web Design Kenya | WPfoss">
<meta property="og:description" content="Custom web design from KSh 50,000.">
<meta property="og:image" content="https://wpfoss.ke/og-image.jpg">
<meta property="og:url" content="https://wpfoss.ke/web-design-kenya">
<meta property="og:type" content="website">
<meta property="og:site_name" content="WPfoss">
<meta property="og:locale" content="en_KE">

Best practices

• Use a 1200 x 630 pixel image for og:image (best display quality)
• Keep og:title under 60 characters
• Keep og:description under 160 characters
• Use absolute URLs for og:image and og:url
• Set og:type to "website" for most pages, "article" for blog posts

Common mistakes

• Missing og:image (your share gets no preview image)
• Using a relative path for og:image (often breaks)
• Image too small or wrong aspect ratio
• Not updating Facebook's cache after changing tags (use the Facebook Sharing Debugger)

11. Twitter Card Tags Medium Impact

Twitter (X) uses its own meta tag format for share previews. Although Twitter will fall back to Open Graph tags, dedicated Twitter Card tags give you more control.

Code example

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Web Design Kenya | WPfoss">
<meta name="twitter:description" content="Custom web design from KSh 50,000.">
<meta name="twitter:image" content="https://wpfoss.ke/og-image.jpg">
<meta name="twitter:site" content="@wpfoss">
<meta name="twitter:creator" content="@wpfoss">

Card types

• summary: small square image to the side
• summary_large_image: large image above the text (recommended for most use cases)
• player: for video and audio content
• app: for mobile app downloads

12. Geo Tags Medium Impact for Local

Geo meta tags help search engines understand where your business operates. Useful for ranking on location-based queries.

Code example

<meta name="geo.region" content="KE-110">
<meta name="geo.placename" content="Nairobi">
<meta name="geo.position" content="-1.2864;36.8172">
<meta name="ICBM" content="-1.2864, 36.8172">

Best practices

• geo.region uses ISO 3166-2 codes (KE-110 is Nairobi County)
• geo.position and ICBM both use latitude;longitude (separator differs)
• Use the same coordinates as your Google Business Profile
• Most useful for local service businesses with a specific service area

13. Author and Publisher

Identifies who wrote or published the content. Helpful for E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness) signals.

<meta name="author" content="WPfoss Team">
<meta name="publisher" content="WPfoss">

14. Language

Specify the language of the page content. Belongs on the html tag, not in head, but worth knowing.

<html lang="en">

15. Format Detection

Prevents browsers (especially Safari on iOS) from auto-converting phone numbers and addresses to links, which can break designs.

<meta name="format-detection" content="telephone=no">

16. Facebook Domain Verification

Verifies your domain with Meta for ads management and analytics.

<meta name="facebook-domain-verification" content="abc123xyz">

17. Meta Keywords No longer used

Once the foundation of SEO. Google and other major search engines have not used this tag since 2009. You can safely remove it from your pages.

<!-- Skip this. It does nothing for SEO. -->
<meta name="keywords" content="web design, kenya, mpesa">