Add lang attribute and hreflang meta tags

[kanagarajkm]

[kanagarajkm]

@deekoder can you please review this.

[deekoder]

@kanagarajkm - Let me think more about changing the structure of the yml file so much. I feel we could do this much more tightly without so many changes to the yml file. Will get back to you with exact actionable suggestions for you to evaluate further.

[kanagarajkm]

@deekoder @kaankabalak we have another problem. As per Google, the translation links should be fully qualified https://support.google.com/webmasters/answer/189077

Alternate URLs must be fully-qualified, including the transport method (http/https), so: https://example.com/foo, not //example.com/foo or /foo

[kanagarajkm]

@deekoder @kaankabalak please review again.

[kaankabalak]

There just a slight problem on the dropdown where we list the translations:

It seems like this was being caused because we were iterating one level deeper than we were supposed to and we can apply the following change to fix this issue:

diff --git a/lib/_header.erb b/lib/_header.erb
index c1dc2f2..663f133 100644
--- a/lib/_header.erb
+++ b/lib/_header.erb
@@ -43,11 +43,9 @@
               </a>
 
               <div class="dropdown__menu dropdown__menu--right">
-                <%- @site_map['Languages'].each do |categories| -%>
-                  <%- categories.each do |key, value| -%>
-                    <%- unless key == @site_map['Language']%>
-                      <a class="dropdown__item" href="<%=value -%>"><%= key -%></a>
-                    <%- end -%>
+                <%- @site_map['Languages'].each do |key, value| -%>
+                  <%- unless key == @site_map['Language']%>
+                    <a class="dropdown__item" href="<%=value -%>"><%= key -%></a>
                   <%- end -%>
                 <%- end -%>
               </div>

[kaankabalak]

It also seems like the tags weren't appearing on the index page as we were not including them for the case where we are rendering the index page. We can fix this issue by applying the following diff:

diff --git a/lib/index.erb b/lib/index.erb
index a267944..84f5f17 100644
--- a/lib/index.erb
+++ b/lib/index.erb
@@ -17,14 +17,23 @@
       <%- end -%>
       <meta name="description" content="<%= key2["SEO Description"] %>">
       <meta name="keywords" content="<%= key2["SEO Keywords"] %>">
-
       <%- if !@site_map['Languages'].nil? && !key2["SEO Languages"].nil? -%>
-        <link rel="alternate" hreflang="<%= ISO_639.find_by_english_name(@site_map['Language']).alpha2 %>" href="<%=@site_map['Languages'][@site_map['Language']]%>/<%=key2["Slug"]%>.html" title="lang">
-        
+        <link
+          rel="alternate"
+          hreflang="<%= ISO_639.find_by_english_name(@site_map['Language']).alpha2 %>"
+          href="<%=@site_map['Languages'][@site_map['Language']]%>/<%=key2["Slug"]%>.html"
+          title="lang"
+        />
         <% key2["SEO Languages"].each do |lang| %>
-          <link rel="alternate" hreflang="<%= ISO_639.find_by_english_name(lang).alpha2 %>" href="<%=@site_map['Languages'][lang]%>/<%=key2["Slug"]%>.html" title="lang">
-        <% end %>
+          <link
+            rel="alternate"
+            hreflang="<%= ISO_639.find_by_english_name(lang).alpha2 %>"
+            href="<%=@site_map['Languages'][lang]%>/<%=key2["Slug"]%>.html"
+            title="lang"
+          />
+        <%- end -%>
       <%- end -%>
+    <%-# this is the case where we render index.html -%>
     <%- else -%>
       <%-# Take first entry specified under the 'Documents' key for index page-%>
       <%- if !@site_map['Documents'][0].values[0][0]["SEO Title"] -%>
@@ -35,6 +44,22 @@
       <%- end -%>
       <meta name="description" content="<%= @site_map['Documents'][0].values[0][0]["SEO Description"] %>">
       <meta name="keywords" content="<%= @site_map['Documents'][0].values[0][0]["SEO Keywords"] %>">
+      <%- if !@site_map['Languages'].nil? && !@site_map['Documents'][0].values[0][0]["SEO Languages"].nil? -%>
+        <link
+          rel="alternate"
+          hreflang="<%= ISO_639.find_by_english_name(@site_map['Language']).alpha2 %>"
+          href="<%=@site_map['Languages'][@site_map['Language']]%>/<%=@site_map['Documents'][0].values[0][0]["Slug"]%>.html"
+          title="lang"
+        />
+        <% @site_map['Documents'][0].values[0][0]["SEO Languages"].each do |lang| %>
+          <link
+            rel="alternate"
+            hreflang="<%= ISO_639.find_by_english_name(lang).alpha2 %>"
+            href="<%=@site_map['Languages'][lang]%>/<%=@site_map['Documents'][0].values[0][0]["Slug"]%>.html"
+            title="lang"
+          />
+        <% end %>
+      <%- end -%>
     <%- end -%>
 
     <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">

[kanagarajkm]

@kaankabalak thanks for the feedback. For the index page, i have added the languages url as an alternate link instead of the first page link. Please have a look.

https://docs.min.io/ and https://docs.min.io/docs/minio-quickstart-guide.html have the same content, we need to add a canonical tag for this, i will open a separate issue.

[kanagarajkm]

@deekoder can you please review this?