Jekyll One

QuickSearch

  • Home
    • Series
  • Previous
  • Next

2023 July, 8

Series Elements

This is part 3 in a 3-part series:

  • 2023-07-18 · Part 1 · Magic SEO - Creating Keywords
  • 2023-07-17 · Part 2 · Magic SEO - Structured Data
  • 2023-07-08 · Part 3 · Magic SEO - Canonical Links
Mark original content

A canonical link (canonical URL) allows website operators in an HTML document to identify the original resource with the content used more than once (duplicate content).

A canonical link (canonical URL) allows website operators in an HTML document to identify the original resource with the content used more than once (duplicate content).

2 Minutes to read

Canonical links

This link type is defined in {RFC 6596} and is assigned as a link element to the canonical attribute, noted in the <head> section of an HTML document.

Example
<link rel="canonical" href="https://example.com/canonical_link/">

Why to specify canonical links

Several URIs often refer to the same content. Examples are dynamically generated content, as in forums or others. Content management systems (CMS) or website generators (SSGs) like Jekyll may reference to URLs where the same (or similiar) content available is under different addresses.

Linking websites, particularly search engines with their link databases, can thus find the original document for a page and click on it in the search results. The attribute was introduced by search engine operators, above all Google, to make it easier for their web crawlers the primary resource to be identified with certainty.

Incorrect use of canonical links (e.g., multiple in one HTML document placement of the item in the search results deteriorates or leads to deletion from the search engine’s index. It is highly recommended to specify the URL of the original content when other pages use the same or quite similia content.

Generate canonical links using J1

For J1 Template it is very easy to specify the URL of the original content by using the canonical tag in the frontmatter of a page or post:

Frontmatter example
---
  title:                                  Rouge
  tagline:                                Code Highlighter
  ...
  canonical:                              true
  regenerate:                             false
  permalink:                              /pages/public/learn/roundtrip/rouge/
  ...
---

For the build-in web, the source code of the previewer page at Rouge — Highlighter Themes is quite similiar to Roundtrip — Rouge.