Add lang attribute and hreflang meta tags

[kanagarajkm]

No description provided.

[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.

[deekoder]

I am not for changing the structure. How about we infer the Language. We already know if its english or chinese or japanese language.

[kanagarajkm]

@deekoder do you mean we can infer the language from the name of the file? Like site.yaml is english, site_CN.yml is chinese and so on.

[deekoder]

@kanagarajkm do we really need this in the site.yml file? Can we infer this based on the original Language settings.

[kanagarajkm]

@deekoder yes, we could have avoided it. But some of the docs which are in english does not have equivalent chinese docs. We might end up with lot of 404 links.

[deekoder]

I see. Ok @kaankabalak explained that to me. So that's why it's at a document level.

[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]

Maybe it might be a good idea to indicate (either on the key name or the comment for this field) that this is the current language of the docs for the pages listed in this yml file.

[kanagarajkm]

@kaankabalak will update the comment to convey it correctly, thanks

[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">

[kaankabalak]

Please see the comments for the required changes

[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?