SEO & Kirby - Canonical & hreflang

Part 3 of our series on Kirby & SEO, this time looking at how to add canonical and hreflang tags to your header.

Why use those tags?

Both tags serve the same purpose to inform search engines of your URL organization. We'll look at what each does and when you should use them in this tutorial

What you need

Nothing! For this tutorial, there won't be any code-along, or any tutorial files, we're just going to give you 5 lines of code that need to be added inside the head of your templates, most likely in the header.php snippet. Read along ;)

 

Preferred URL - The canonical tag

What it's used for

The canonical is used to signal to search engines the main URL of each page so that your content that may be available at several URLs will be ranked effectively. This is useful when your htaccess is set to serve the same content with or without the www subdomain, or when you're using URL parameters to filter content. There are many more use cases when the canonical tag comes in handy, such as content syndication, that you can read about in Google's "use canonical URLs" guide.

How to implement it in Kirby

Thankfully for us, we only need to add one tiny line of code in the <head> of a website with Kirby.

<link rel="canonical" href="<?= $page->url() ?>">

The url() method returns the full URL of the page, which is exactly what we need!

Region and Language - The hreflang tag

What it's used for

The hreflang tag is only useful if your website provides content in several languages. Even if it's only a tiny portion of the website. It tells search engines about all the variations of the same page, based on language and/or region. This has two desired effects:

  1. To prevent search engines from penalizing you for "duplicate content" when you're only serving content that is adapted to a specific region, or to a specific language.
  2. To try to serve the appropriate "localized" content straight from the search engine's result page. If a french user performing a search on Google gets a result for one of your pages, Google will automatically try to serve the french variation of your site if it exists. This is an obviously great user experience.

I'll refer you to the hreflang documentation by Google if you want to know all the details about the hreflang tag.

How to implement it in Kirby

Let's first talk about what we need to implement. For each variation of the page, we need to list in the header of the page the URLs and languages (or locales) of each other version. We're doing this using the following tag:

<link rel="alternate" hreflang="x" href="y" />

Where x is the language code and y the URL of the page in that language.

In Kirby, the language methods allow us to do is in a short foreach() loop. In verbose, we will do this: for each language of the site, if it is not the language of the current page, echo an hreflang tag with the language code and URL of the page for that language code. Let's look at the code.

<?php foreach($site->languages() as $language): ?>
<?php if($language == $site->language()) continue; ?>
<link rel="alternate" hreflang="<?php echo html($language->code()) ?>" href="<?php echo $page->url($language->code()) ?>" />
<?php endforeach ?>

Step by step:

  1. foreach($site->languages() as $language) This allows us to loop through all the languages of the website, as defined in the config.php file.
  2. if($language == $site->language()) continue Remember we're not supposed to add an hreflang tag for the current language. This bit does just that. It checks that the current $language variable is not equal to the language of the page. If the check is true, we're using continue to ignore this language.
  3. hreflang="<?php echo html($language->code()) ?>" We need to echo the language code in the hreflang attribute. This language code can be two letters for a language, "fr" or 4 letters separated by an underscore for a locale, "fr_FR".
  4. <?php echo $page->url($language->code()) ?> More Kirby magic. The URL method has an optional language method to get the URL of the current page in another language. Leaving it blank returns the current language. We're again using the language code to automatically get the URL for that language code.
  5. And that's it! Close the loop, test the code, and congratulate yourself for making your website more SEO and user-friendly, all at once!

Stay tuned!

Want to always know the latest Maco news? Subscribe and receive the newsletter straight in your inbox. No spam guarantee!

Write a comment