canonical and meta tags: what Google reads before it reads your text

tl;dr#

meta tags are what Google and social networks read before they open your page: title, description, image. canonical is one of them, and it says which address is the "official" one when the same content shows up in more than one place. I learned this by doing it: in the CMS it became a dialog with the SEO fields and a live preview of how the article looks on Google, and on my portfolio it became a helper every page uses.

the problem canonical solves#

the same article can have more than one address:

https://blog.example.com/articles/my-post
https://blog.example.com/articles/my-post?utm_source=instagram
https://blog.example.com/articles/old-post-title

to you it's one page. to Google it's three, with the same text. it doesn't know which one to show and ends up splitting the "strength" between them. canonical fixes that with one line in the <head>:

<link rel="canonical" href="https://blog.example.com/articles/my-post" />

in other words: "there may be many ways to get here, but this is the right address".

the other meta tags#

the ones that matter most day to day:

• <title>: the blue title in the Google result. it doesn't have to match the article title; sometimes a shorter, more direct title works better in search.
• <meta name="description">: the small gray text under the title. if you don't write one, Google grabs any piece of the page.
• Open Graph (og:title, og:description, og:image): what shows up when someone pastes the link on WhatsApp, LinkedIn or Discord.

in the CMS: a dialog for it#

before, the article editor only let you change the title, description and address in a small drawer. the SEO fields didn't even have a screen. now there's an "Advanced" dialog:

• on the left, the fields: summary, Google title, description, keywords, address, old addresses and canonical URL;
• on the right, a live preview of how the article looks on Google, in a shared link and on the blog card.

the preview is what made it really click for me. you type the description and watch it get cut off on Google once it's too long. way clearer than reading about it.

old addresses are about canonical too: when you change an article's address, the old one can't just break. it keeps leading to the new one, and canonical points only to the new one.

on my portfolio#

the site has Portuguese and English, so every page lives at two addresses (/agora and /en/agora). the care here is different: it's not duplicate content, it's the same page in different languages. so besides canonical, each page says where its versions in other languages are:

export function alternates(locale: Locale, path: string) {
  return {
    canonical: localePath(locale, path),
    languages: {
      "pt-BR": localePath("pt", path),
      en: localePath("en", path),
      "x-default": localePath("pt", path),
    },
  };
}

and each page just calls it in generateMetadata:

alternates: alternates(locale, "/agora"),

the Portuguese page points canonical to itself, the English one too, and both say "my sibling in the other language is over there". x-default is for people who speak neither: they land on Portuguese.

what I take from this#

SEO looked like a marketing thing, kind of magic. in practice it's very concrete: telling Google which address is the right one, what to show in the result and what to show when someone shares it. the rest is writing a good text.