Titles & Meta Tags

The <head> of your document carries the highest signal-per-byte in SEO. The title element is Google's first-choice source for the clickable headline of your result (the "title link") and a strong relevance hint. Together with the meta description it shapes your SERP listing: your ad copy in the organic results.

Title tags#

The rules that matter#

• One title per page, unique across the site. Duplicate titles tell engines your pages are interchangeable, and Google lists boilerplate titles as a reason to replace them.
• Front-load the primary keyword, naturally, not robotically. Relevance scoring and scanning users both weight the start.
• Keep the important words early. Google says there is no limit on how long a <title> can be, but the title link is truncated "as needed, typically to fit the device width". Around 50 to 60 characters usually survives on desktop, but truncation is measured in pixels, not characters. Check yours in the SERP preview tool.
• Make it a promise the page keeps. A title that oversells earns the click and then the bounce back to the results.

How to Fix Soft 404 Errors in Next.js (5 Causes)     ← how-to + specificity
Core Web Vitals: A Field Guide for React Developers   ← keyword + audience
Ahrefs vs Semrush: We Tested Both for 6 Months        ← comparison + experience
robots.txt Generator - Free, No Signup                ← tool + objection removal

Why Google rewrites titles#

Google does not have to use your <title>. It builds the title link from several sources: the title element, the main visible title, <h1> and other headings, og:title, other large and prominent text, anchor text on the page and in links pointing to it, and WebSite structured data. Its documentation lists the problems that most often trigger a rewrite:

You cannot opt out of rewrites. The best defense is an accurate, specific title that matches your <h1>, so every source Google might pick tells the same story.

Setting titles in Next.js#

import type { Metadata } from "next";
 
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);
  return {
    title: post.title, // template in layout adds the site suffix
    description: post.excerpt,
  };
}

Use the title.template pattern in your root layout ("%s · YourBrand") so every page gets consistent branding without repetition.

Meta descriptions#

Descriptions are not a ranking factor, but they influence click-through rate, which makes them one of the cheapest wins in SEO. Google's snippet documentation says snippets are "primarily created from the page content itself", and the description is used when it describes the page more accurately than on-page text. So write it as the best summary, not a keyword list:

• Unique per page. There is no length limit, but snippets are truncated to fit the device, so put the complete idea in roughly the first 150 to 160 characters.
• Include the primary keyword. Matching terms are often bolded in the snippet.
• Write it as ad copy: state the benefit, give a reason to click.
• Expect Google to override it with a passage when that matches the query better. That's normal.
• Programmatic descriptions are fine for large, database-driven sites. Google explicitly encourages them, as long as they are human-readable and diverse.

AI-drafted titles and descriptions#

Generating titles and descriptions with an LLM is normal practice now. On October 1, 2026 Google updated its generative AI content guidance to say it is critical to manually fact-check AI output before publishing, and that this "also applies to metadata like <title> elements, meta description elements, structured data, and alternate texts for images". A hallucinated price, spec or claim in a description is just as visible as one in the body. See AI-Assisted Content Without Penalties for a review workflow.

Canonical tags#

The canonical tag declares the preferred URL when content is reachable at multiple addresses (tracking parameters, www/non-www, http/https, print versions):

export async function generateMetadata({ params }): Promise<Metadata> {
  const { id } = await params;
  return {
    alternates: {
      canonical: `https://example.com/products/${id}`,
    },
  };
}

Canonicals are a hint, not a directive: engines can ignore them if other signals disagree. Put the canonical in the server-rendered HTML; if JavaScript later changes it to a different value, Google may get mixed signals. Deep coverage in Crawling & Indexing.

Robots meta#

Controls indexing and snippet behavior per page:

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

In Next.js, set these through the Metadata API rather than hand-written tags:

export const metadata: Metadata = {
  robots: {
    index: true,
    follow: true,
    googleBot: { "max-image-preview": "large", "max-snippet": -1 },
  },
};

Open Graph & social cards#

OG tags don't affect rankings, but they control how links render in social feeds and chat apps, and Google reads two of them:

• og:title is one of the sources Google may use to build a title link (documented since August 2024).
• og:image (or schema.org primaryImageOfPage) tells Google your preferred thumbnail image in Search and Discover. Google clarified this on March 2, 2026. Use a representative, high-resolution image, not your logo.

export const metadata: Metadata = {
  openGraph: {
    title: "Rankyl - SEO, AEO & GEO from zero to hero",
    description: "The complete free curriculum for modern search.",
    type: "website",
    images: ["/og.png"], // 1200×630
  },
  twitter: { card: "summary_large_image" },
};

Next: Content Optimization, structuring the body of the page itself.