Key takeaways
- The
<head>holds information about a page: character set, viewport, title, description, canonical, social tags, icons and resources. - A handful of head tags matter for SEO; many others (like meta keywords) are useless.
- Order matters slightly for performance: charset first, then viewport, then title, then everything else.
Visitors never see most of the <head>, but search engines, browsers and social apps read it carefully. A missing viewport tag breaks mobile layouts; a wrong canonical can remove a page from Google; a missing Open Graph image makes your WhatsApp shares look broken. Here is every head tag a modern page needs, in a sensible order, with what each does.
A complete, recommended <head>#
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WordPress Redirects: 301 With Plugins & .htaccess | IFTIKHAR</title>
<meta name="description" content="How to create redirects in WordPress…">
<link rel="canonical" href="https://iftikhar.in/wordpress-redirects/">
<meta name="robots" content="max-image-preview:large">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="/assets/main.css">
<script src="/assets/main.js" defer></script>
<meta property="og:title" content="WordPress Redirects: 301 With Plugins">
<meta property="og:description" content="…">
<meta property="og:image" content="https://iftikhar.in/share/redirects.png">
<meta property="og:url" content="https://iftikhar.in/wordpress-redirects/">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#7ed957">
<script type="application/ld+json">{ … structured data … }</script>
</head>The essential tags, explained#
| Tag | Why it matters |
|---|---|
<meta charset="utf-8"> |
Correct display of characters like ₹, é and emoji. Must be within the first 1024 bytes. |
<meta name="viewport"> |
Makes mobile browsers use the device width. Without it, mobile pages render zoomed-out. See viewport meta tag. |
<title> |
Browser tab text and usually the headline in search results. See title tag. |
meta description |
Often used as the search snippet; influences clicks. See meta description. |
link rel="canonical" |
The preferred URL for this content. See canonical tag. |
meta robots |
Indexing instructions like noindex. See meta robots tag. |
| Open Graph / Twitter tags | How the page looks when shared on social apps. See Open Graph. |
| Icons and manifest | Favicon in tabs and search results, home-screen icon, installable app. |
| JSON-LD | Structured data for entities and rich results. See JSON-LD. |
link rel="alternate" hreflang |
Only for multilingual sites. See hreflang. |
Need a hand with this?
Get a quick, honest review of your website’s SEO.
Performance-related head tags#
preconnectto critical third-party origins (font or CDN hosts) so connections start early.preloadonly for truly critical files — the LCP image if it’s a CSS background, or a key font. Preloading too much slows everything.- Stylesheets in the head (they block rendering, so keep them lean).
- Scripts with
deferorasyncso they don’t block parsing — see defer vs async.
Tags you can drop#
<meta name="keywords">— ignored by Google for over a decade.<meta name="revisit-after">,rating,distribution— never had real effect.<meta http-equiv="X-UA-Compatible">— only for old Internet Explorer.- Duplicate tags from several plugins (two canonicals or two descriptions confuse search engines).
Checking your head tags#
- View source and look for duplicate
title,descriptionorcanonicaltags — common when a theme and an SEO plugin both output them. - Use Search Console’s URL Inspection to confirm the canonical Google selected.
- Test social previews with Facebook’s Sharing Debugger and LinkedIn’s Post Inspector.
- Validate structured data with the Rich Results Test.
In WordPress, your theme and SEO plugin generate most of these tags. This theme outputs a complete set and automatically steps aside when Yoast or Rank Math is active, so you never get duplicates.
HTML head FAQ#
Does the order of head tags matter?#
Charset should come first and the viewport early. After that, order mostly affects performance: put critical CSS before scripts and avoid render-blocking resources.
Can JavaScript add head tags?#
It can, and Google usually picks them up after rendering, but other crawlers and social apps often don’t run JavaScript. Put SEO-critical tags in the server-rendered HTML.
How long should a title tag be?#
Roughly 50–60 characters so it isn’t cut off in most search results. Put the main keyword near the start.