From 88cc68f4a0fc7982b71d6c45514be7d0b8ef02d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=93scar=20Fern=C3=A1ndez=20V=C3=A1zquez?=
 <welpo@users.noreply.github.com>
Date: Mon, 18 Sep 2023 22:11:00 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(header):=20add=20support=20for?=
 =?UTF-8?q?=20canonical=20URLs=20(#168)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config.toml                    |  6 ++++++
 templates/partials/header.html | 29 +++++++++++++++++++++--------
 theme.toml                     |  6 ++++++
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/config.toml b/config.toml
index a5e851e..7f1ed17 100644
--- a/config.toml
+++ b/config.toml
@@ -68,6 +68,12 @@ browser_theme_color = "#087e96"
 # You can load a stylesheet for a single post by adding it to the [extra] section of the post's front matter, following this same format.
 stylesheets = []
 
+# Sets the default canonical URL for all pages.
+# Individual pages can override this in the [extra] section using canonical_url.
+# Example: "$base_url/blog/post1" will get the canonical URL "https://example.com/blog/post1".
+# Note: To ensure accuracy in terms of matching content, consider setting 'canonical_url' individually per page.
+# base_canonical_url = "https://example.com"
+
 # Remote repository for your Zola site.
 # Used for `show_remote_changes` and `show_remote_source` (see below).
 # Supports GitHub, GitLab, Gitea, and Codeberg.
diff --git a/templates/partials/header.html b/templates/partials/header.html
index b969e75..fbbd630 100644
--- a/templates/partials/header.html
+++ b/templates/partials/header.html
@@ -82,13 +82,6 @@
     <meta property="og:title" content="{{ page.title | default(value=config.title) | safe }}" />
     <meta property="og:type" content="article" />
 
-    {# Add og:locale and hreflang tags for multilingual sites #}
-    {%- if config.languages | length > 0 and current_url %}
-        {%- include "partials/multilingual_tags.html" -%}
-    {%- else -%}
-        <meta property="og:locale" content="{{ macros_translate::translate(key="date_locale", default="en_GB", language_strings=language_strings) }}" />
-    {%- endif %}
-
     {# Image for social media sharing #}
     {%- set social_media_card = macros_settings::evaluate_setting_priority(setting="social_media_card", page=page | default(value=""), section=section | default(value=""), default_global_value="") -%}
     {% if social_media_card %}
@@ -121,8 +114,28 @@
         <meta name="twitter:card" content="summary_large_image" />
     {% endif %}
 
+    {# Add og:locale and hreflang tags for multilingual sites #}
+    {%- if config.languages | length > 0 and current_url %}
+        {%- include "partials/multilingual_tags.html" -%}
+    {%- else -%}
+        <meta property="og:locale" content="{{ macros_translate::translate(key="date_locale", default="en_GB", language_strings=language_strings) }}" />
+    {%- endif %}
+
+    {# Set canonical URL #}
     {%- if current_url -%}
-        <meta property="og:url" content="{{ current_url }}">
+        {%- if page.extra.canonical_url or section.extra.canonical_url -%}
+            {%- set canonical_url = page.extra.canonical_url | default(value=section.extra.canonical_url) -%}
+        {%- elif config.extra.base_canonical_url -%}
+            {%- set canonical_url = current_url | replace(from=config.base_url, to=config.extra.base_canonical_url) -%}
+        {%- endif -%}
+    {%- endif -%}
+    
+    {# Add canonical URL, if set #}
+    {%- if canonical_url -%}
+        <link rel="canonical" href="{{ canonical_url }}" />
+        <meta property="og:url" content="{{ canonical_url }}" />
+    {%- elif current_url -%}
+        <meta property="og:url" content="{{ current_url }}" />
     {%- endif -%}
     
     <meta property="og:site_name" content="{{ config.title }}">
diff --git a/theme.toml b/theme.toml
index df283a3..b22f811 100644
--- a/theme.toml
+++ b/theme.toml
@@ -51,6 +51,12 @@ skin = ""
 # You can load a stylesheet for a single post by adding it to the [extra] section of the post's front matter, following this same format.
 stylesheets = []
 
+# Sets the default canonical URL for all pages.
+# Individual pages can override this in the [extra] section using canonical_url.
+# Example: "$base_url/blog/post1" will get the canonical URL "https://example.com/blog/post1".
+# Note: To ensure accuracy in terms of matching content, consider setting 'canonical_url' individually per page.
+# base_canonical_url = "https://example.com"
+
 # Remote repository for your Zola site.
 # Used for `show_remote_changes` and `show_remote_source` (see below).
 # Supports GitHub, GitLab, Gitea, and Codeberg.