HTML Canonical URLs with rel="canonical"

The words in the page matter most, but some HTML in the head helps describe how the page fits into a website.

What You Need to Know

A canonical link identifies the URL you would prefer search engines to treat as the main version of a page. It is a hint, not a redirect or a guarantee, and it should not contradict the page's other URL signals.

In this example: define one canonical URL for duplicate variants.

Try the Example

Take a look at the example. We’ll explain the important lines right below it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>How to Grow Tomatoes | Garden Club</title>
    <link rel="canonical" href="https://example.com/guides/grow-tomatoes">
</head>
<body>
    <h1>How to Grow Tomatoes</h1>
</body>
</html>

Let’s Read the Code

• rel: Rel defines a relationship, such as a canonical page URL or stylesheet.
• <meta>: A meta element provides document metadata for browsers and related systems.
• <title>: Title provides the document title that may appear in browser tabs and search results.
• lang: Lang identifies the language used in a document or passage.

Read the named elements and attributes together. They explain how the browser connects this feature to the rest of the page.

What Happens in the Browser?

The browser and search engines can interpret metadata differently. It is a hint about the actual page, not a way to guarantee a ranking or a preview.

Keep the page consistent. The document title, visible heading, metadata, and canonical URL should refer to the same real content. If they disagree, browsers and search systems may have a harder time deciding how the page should be described.

Your Turn

Write the title and summary for one page of your own. Can someone understand the page topic without opening the document?

Note: The example uses example.com as a placeholder address; replace it with the actual public URL when publishing.

Common Beginner Mistakes

• Writing metadata that does not match the visible page.
• Search engines treat canonical URLs as hints, not commands. Avoid conflicting canonical, redirect, and alternate signals.

Key Takeaways

• A canonical link identifies the URL you would prefer search engines to treat as the main version of a page.
• rel: Rel defines a relationship, such as a canonical page URL or stylesheet.
• Write metadata for the real page, not for an imagined result. Search tools may choose to display something different.