Add Jekyll SEO plugin

- Add all the Apple touch and Microsoft icons - Fix Jekyll config error - add a `browserconfig.xml` file - Add `alt`, `title`, `width` and `height` attributes to images - Add `lang="en"` to the start `html` tag - Add `meta viewport` tag - refs mruby#85 https://webhint.io/docs/user-guide/hints/hint-apple-touch-icons/ https://github.com/jekyll/jekyll-seo-tag
jbampton · Dec 23, 2020 · a3ed9ef · a3ed9ef
1 parent f64a4cc
commit a3ed9ef
Show file tree

Hide file tree

Showing 24 changed files with 34 additions and 9 deletions.
diff --git a/Gemfile b/Gemfile
@@ -1,6 +1,7 @@
 source 'https://rubygems.org'
 
 gem 'github-pages'
+gem 'jekyll-seo-tag'
 
 group :scripts do 
   gem 'mgem' 

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -266,6 +266,7 @@ PLATFORMS
 DEPENDENCIES
   git
   github-pages
+  jekyll-seo-tag
   mgem
   yard-coderay
   yard-mruby

diff --git a/_config.yml b/_config.yml
@@ -10,7 +10,13 @@ markdown: kramdown
 highlighter: rouge
 url: https://mruby.org
 repository: https://github.com/mruby/mruby.github.io
-include: _index.html
+include: ['_index.html']
+image:
+  path: /images/mruby_logo_red_icon.png
+  height: 300
+  width: 300
+plugins:
+  - jekyll-seo-tag
 exclude:
 - Gemfile
 - Gemfile.lock

diff --git a/_includes/header.html b/_includes/header.html
@@ -1,9 +1,7 @@
         <meta charset="utf-8">
-
+        <meta name="viewport" content="width=device-width,initial-scale=1">
         <title>{{ page.title }}</title>
 
-        {% include icons.html %}
-
         <!-- Bootstrap CSS -->
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
 
@@ -16,3 +14,6 @@
 
         <!-- Custom CSS -->
         <link rel="stylesheet" href="/css/main.css">
+
+        {% include icons.html %}
+        {% seo title=false %}
diff --git a/_includes/icons.html b/_includes/icons.html
@@ -2,7 +2,19 @@
 
         <!-- Favicon -->
         <link rel="icon" type="image/x-icon" href="/favicon.ico">
-        <link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png">
+        <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon.png">
+        <link rel="apple-touch-icon" sizes="57x57" href="/images/icons/apple-touch-icon-57x57.png">
+        <link rel="apple-touch-icon" sizes="72x72" href="/images/icons/apple-touch-icon-72x72.png">
+        <link rel="apple-touch-icon" sizes="76x76" href="/images/icons/apple-touch-icon-76x76.png">
+        <link rel="apple-touch-icon" sizes="114x114" href="/images/icons/apple-touch-icon-114x114.png">
+        <link rel="apple-touch-icon" sizes="120x120" href="/images/icons/apple-touch-icon-120x120.png">
+        <link rel="apple-touch-icon" sizes="144x144" href="/images/icons/apple-touch-icon-144x144.png">
+        <link rel="apple-touch-icon" sizes="152x152" href="/images/icons/apple-touch-icon-152x152.png">
+        <link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon-180x180.png">
+        <link rel="icon" type="image/png" sizes="192x192"  href="/images/icons/android-icon-192x192.png">
+        <link rel="icon" type="image/png" sizes="96x96" href="/images/icons/favicon-96x96.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png">
+        <meta name="msapplication-TileColor" content="#e0115f">
+        <meta name="msapplication-TileImage" content="/images/icons/ms-icon-144x144.png">
         <link rel="manifest" href="/images/icons/site.webmanifest">
diff --git a/_includes/navigation.html b/_includes/navigation.html
@@ -1,6 +1,8 @@
             <nav class="navbar navbar-mruby" role="navigation">
               <div class="navbar-header">
-                <a href="/"><img src="/images/mruby_header.png" alt="mruby" title="mruby"></a>
+                <a href="/">
+                    <img src="/images/mruby_header.png" alt="mruby" title="mruby" width="214" height="90">
+                </a>
               </div>
 
               <div>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     {% include header.html %}
   </head>

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     {% include header.html %}
   </head>

diff --git a/browserconfig.xml b/browserconfig.xml
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/images/icons/ms-icon-70x70.png"/><square150x150logo src="/images/icons/ms-icon-150x150.png"/><square310x310logo src="/images/icons/ms-icon-310x310.png"/><TileColor>#e0115f</TileColor></tile></msapplication></browserconfig>
diff --git a/images/icons/apple-touch-icon-114x114.png b/images/icons/apple-touch-icon-114x114.png
diff --git a/images/icons/apple-touch-icon-120x120.png b/images/icons/apple-touch-icon-120x120.png
diff --git a/images/icons/apple-touch-icon-144x144.png b/images/icons/apple-touch-icon-144x144.png
diff --git a/images/icons/apple-touch-icon-152x152.png b/images/icons/apple-touch-icon-152x152.png
diff --git a/images/icons/apple-touch-icon-180x180.png b/images/icons/apple-touch-icon-180x180.png
diff --git a/images/icons/apple-touch-icon-57x57.png b/images/icons/apple-touch-icon-57x57.png
diff --git a/images/icons/apple-touch-icon-72x72.png b/images/icons/apple-touch-icon-72x72.png
diff --git a/images/icons/apple-touch-icon-76x76.png b/images/icons/apple-touch-icon-76x76.png
diff --git a/images/icons/apple-touch-icon.png b/images/icons/apple-touch-icon.png
diff --git a/images/icons/favicon-96x96.png b/images/icons/favicon-96x96.png
diff --git a/images/icons/ms-icon-144x144.png b/images/icons/ms-icon-144x144.png
diff --git a/images/icons/ms-icon-150x150.png b/images/icons/ms-icon-150x150.png
diff --git a/images/icons/ms-icon-310x310.png b/images/icons/ms-icon-310x310.png
diff --git a/images/icons/ms-icon-70x70.png b/images/icons/ms-icon-70x70.png
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
 
 <div class="row clearfix">
   <div class="col-md-12 column mruby-is">
-    <img src="/images/mruby_logo_red_icon.png"/>
+    <img src="/images/mruby_logo_red_icon.png" alt="mruby" title="mruby" width="300" height="300">
     <p>
     mruby is the lightweight implementation of the <a href="https://www.ruby-lang.org">Ruby language</a> complying with part of the <a href="http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=59579">ISO standard</a>. mruby can be linked and embedded within your application.
     </p>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<?xml version="1.0" encoding="utf-8"?>
		<browserconfig><msapplication><tile><square70x70logo src="/images/icons/ms-icon-70x70.png"/><square150x150logo src="/images/icons/ms-icon-150x150.png"/><square310x310logo src="/images/icons/ms-icon-310x310.png"/><TileColor>#e0115f</TileColor></tile></msapplication></browserconfig>