diff --git a/sphinx_rtd_theme/layout.html b/sphinx_rtd_theme/layout.html
index 94a40cc1c..2ff04bcec 100644
--- a/sphinx_rtd_theme/layout.html
+++ b/sphinx_rtd_theme/layout.html
@@ -51,12 +51,31 @@
 
   {#- CANONICAL URL (deprecated) #}
   {%- if theme_canonical_url and not pageurl %}
-    <link rel="canonical" href="{{ theme_canonical_url }}{{ pagename }}.html"/>
+    <link rel="canonical" href="{{ theme_canonical_url }}{{ pagename }}{% if builder == 'dirhtml' %}/{% else %}.html{% endif %}"/>
   {%- endif -%}
 
-  {#- CANONICAL URL #}
-  {%- if pageurl %}
-    <link rel="canonical" href="{{ pageurl|e }}" />
+  {#-
+    CANONICAL URL
+    NB! pageurl is currently a non-documented template context variable!
+    pageurl implementation:
+    https://www.sphinx-doc.org/en/master/_modules/sphinx/builders/html.html
+    https://github.com/readthedocs/readthedocs.org/blob/4b2eb75bebfce04390ac3f84d1c57ef7f7126fe8/readthedocs/doc_builder/templates/doc_builder/conf.py.tmpl#L151-L156
+  -#}
+  {%- if pageurl -%}
+    {#-
+      pageurl implementation wrongly: adds .html for the dirhtml builder's pageurl
+      Workaround for: https://github.com/sphinx-doc/sphinx/issues/9730
+      Once a fix is released in Sphinx, put an upper bound on the Sphinx version for the workaround
+    -#}
+    {%- if builder == 'dirhtml' and pageurl.endswith('index.html') %}
+      {#- This expression trims away index.html entirely #}
+      <link rel="canonical" href="{{ (pageurl|e)[:-10] }}" />
+    {%- elif builder == 'dirhtml' and pageurl.endswith('.html') %}
+      {#- This expression trims away .html and adds a / #}
+      <link rel="canonical" href="{{ (pageurl|e)[:-5] }}/" />
+    {%- else %}
+      <link rel="canonical" href="{{ pageurl|e }}" />
+    {%- endif -%}
   {%- endif -%}
 
   {#- JAVASCRIPTS #}