Better SEO, OpenGraph, schema.org and clean generated code (#481)

kushalarora · Dec 31, 2021 · b950fc3 · b950fc3
1 parent 7f53255
commit b950fc3
Show file tree

Hide file tree

Showing 31 changed files with 899 additions and 605 deletions.
diff --git a/Gemfile b/Gemfile
@@ -15,4 +15,6 @@ group :jekyll_plugins do
  gem 'jemoji'
  gem 'unicode_utils'
  gem 'webrick'
+ gem 'htmlcompressor'
+ gem 'htmlbeautifier'
 end
diff --git a/_config.yml b/_config.yml
@@ -13,6 +13,7 @@ footer_text: >
  Powered by <a href="https://jekyllrb.com/" target="_blank">Jekyll</a> with <a href="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/alshedivat/al-folio">al-folio</a> theme.
  Hosted by <a href="https://pages.github.com/" target="_blank">GitHub Pages</a>.
  Photos from <a href="https://unsplash.com" target="_blank">Unsplash</a>.
+keywords: jekyll, jekyll-theme, academic-website, portfolio-website # add your own keywords or leave empty
 
 lang: en # the language of your site (for example: en, fr, cn, ru, etc.)
 icon: 🔥 # the emoji used as the favicon
@@ -40,10 +41,11 @@ max_width: 800px
 # TODO: add layout settings (single page vs. multi-page)
 
 # -----------------------------------------------------------------------------
-# Open Graph
+# Open Graph & Schema.org
 # -----------------------------------------------------------------------------
 # Display links to the page with a preview object on social media.
 serve_og_meta: false # Include Open Graph meta tags in the HTML head
+serve_schema_org: false # Include Schema.org in the HTML head
 og_image: # The site-wide (default for all links) Open Graph preview image
 
 # -----------------------------------------------------------------------------
@@ -72,8 +74,10 @@ rss_icon: true
 contact_note: >
  You can even add a little note about which of these is the best way to reach you.
 
-google_analytics: UA-XXXXXXXXX # out your google-analytics code
-panelbear_analytics: XXXXXXXXX # panelbear analytics site ID
+google_analytics: # your google-analytics ID (format: UA-XXXXXXXXX)
+google_site_verification: # your google-site-verification ID (Google Search Console)
+bing_site_verification: # out your bing-site-verification ID (Bing Webmaster)
+panelbear_analytics: # panelbear analytics site ID (format: XXXXXXXXX)
 
 # -----------------------------------------------------------------------------
 # Blog
@@ -158,10 +162,26 @@ defaults:
  path: "assets/**/*.*"
  values:
  sitemap: false
-
 # Extras
 github: [metadata]
 
+# -----------------------------------------------------------------------------
+# Jekyll optimization
+# -----------------------------------------------------------------------------
+
+# HTML remove comments (<!-- .... -->)
+remove_HTML_comments: false
+
+# HTML beautifier (_plugins/beautify.rb) / https://github.com/threedaymonk/htmlbeautifier
+beautify: false # This function has conflict with the code snippets, they can be displayed incorrectly
+
+# HTML minify (_plugins/minify.rb) Thanks to: https://www.ffbit.com/blog/2021/03/17/html-minification-in-jekyll.html
+minify: false
+
+# CSS/SASS minify
+sass:
+ style: compressed
+
 # -----------------------------------------------------------------------------
 # Jekyll Archives
 # -----------------------------------------------------------------------------
@@ -242,6 +262,8 @@ jekyll-diagrams:
 
 enable_google_analytics: false # enables google analytics
 enable_panelbear_analytics: false # enables panelbear analytics
+enable_google_verification: false # enables google site verification
+enable_bing_verification: false # enables bing site verification
 enable_mansory: true # enables automatic project cards arangement
 enable_math: true # enables math typesetting (uses MathJax)
 enable_tooltips: false # enables automatic tooltip links generated

diff --git a/_includes/figure.html b/_includes/figure.html
@@ -1,17 +1,16 @@
-{% assign path = include.path | remove: ".jpg" | remove: ".jpeg" | remove: ".png" | remove: ".tiff" %}
+{%- assign path = include.path | remove: ".jpg" | remove: ".jpeg" | remove: ".png" | remove: ".tiff" -%}
 
 <figure>
 
  <picture>
- {% for i in site.imagemagick.widths %}
- <source media="(max-width: {{ i }}px)" srcset="{{ path | relative_url }}-{{ i }}.webp">
- {% endfor %}
+ {% for i in site.imagemagick.widths -%}
+ <source media="(max-width: {{ i }}px)" srcset="{{ path | relative_url }}-{{ i }}.webp" />
+ {% endfor -%}
 
  <!-- Fallback to the original file -->
  <img {% if include.class %}class="{{ include.class }}"{% endif %} src="{{ include.path | relative_url }}" {% if include.alt %}alt="{{ alt }}"{% endif %} {% if include.title %}title="{{ title }}"{% endif %} {% if include.zoomable %}data-zoomable{% endif %} />
-
  </picture>
 
- {% if include.caption %}<figcaption class="caption">{{ include.caption }}</figcaption>{% endif %}
+ {%- if include.caption -%}<figcaption class="caption">{{ include.caption }}</figcaption>{%- endif %}
 
 </figure>
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,27 +1,25 @@
-{% if site.footer_fixed %}
-<footer class="fixed-bottom">
- <div class="container mt-0">
- &copy; Copyright {{ site.time | date: '%Y' }} {{ site.first_name }} {{ site.middle_name }} {{ site.last_name }}.
- {{ site.footer_text }}
- {% if site.impressum_path %}
- <a href="{{ site.url }}{{ site.baseurl }}{{ site.impressum_path }}">Impressum</a>.
- {% endif %}
- {% if site.last_updated %}
- Last updated: {{ "now" | date: '%B %d, %Y' }}.
- {% endif %}
- </div>
-</footer>
-{% else %}
-<footer class="sticky-bottom mt-5">
- <div class="container">
- &copy; Copyright {{ site.time | date: '%Y' }} {{ site.first_name }} {{ site.middle_name }} {{ site.last_name }}.
- {{ site.footer_text }}
- {% if site.impressum_path %}
- <a href="{{ site.url }}{{ site.baseurl }}{{ site.impressum_path }}">Impressum</a>.
- {% endif %}
- {% if site.last_updated %}
- Last updated: {{ "now" | date: '%B %d, %Y' }}.
- {% endif %}
- </div>
-</footer>
-{% endif %}
+ {% if site.footer_fixed %}
+ <footer class="fixed-bottom">
+ <div class="container mt-0">
+ &copy; Copyright {{ site.time | date: '%Y' }} {{ site.first_name }} {{ site.middle_name }} {{ site.last_name }}. {{ site.footer_text }}
+ {%- if site.impressum_path -%}
+ <a href="{{ site.url }}{{ site.baseurl }}{{ site.impressum_path }}">Impressum</a>.
+ {%- endif -%}
+ {%- if site.last_updated -%}
+ Last updated: {{ "now" | date: '%B %d, %Y' }}.
+ {%- endif %}
+ </div>
+ </footer>
+ {%- else -%}
+ <footer class="sticky-bottom mt-5">
+ <div class="container">
+ &copy; Copyright {{ site.time | date: '%Y' }} {{ site.first_name }} {{ site.middle_name }} {{ site.last_name }}. {{ site.footer_text }}
+ {%- if site.impressum_path -%}
+ <a href="{{ site.url }}{{ site.baseurl }}{{ site.impressum_path }}">Impressum</a>.
+ {%- endif -%}
+ {%- if site.last_updated -%}
+ Last updated: {{ "now" | date: '%B %d, %Y' }}.
+ {%- endif %}
+ </div>
+ </footer>
+ {%- endif %}
diff --git a/_includes/head.html b/_includes/head.html
@@ -1,50 +1,29 @@
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
+ 
+ <!-- Metadata, OpenGraph and Schema.org -->
+ {% include metadata.html %}
 
-<title>
-{% if site.title == "blank" %}
- {{ site.first_name }} {{ site.middle_name }} {{ site.last_name }}
-{% else %}
- {{ site.title }}
-{% endif %}
-{% if page.title != "blank" and page.url != "/" %}
- | {{ page.title }}
-{% endif %}
-</title>
-<meta name="description" content="{{ site.description }}">
+ <!-- Bootstrap & MDB -->
+ <link href="https://stackpath.bootstrapcdn.com/bootstrap/{{ site.bootstrap.version }}/css/bootstrap.min.css" rel="stylesheet" integrity="{{ site.bootstrap.integrity.css }}" crossorigin="anonymous">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/{{ site.mdb.version }}/css/mdb.min.css" integrity="{{ site.mdb.integrity.css }}" crossorigin="anonymous" />
 
-<!-- Open Graph -->
-{% if site.serve_og_meta %}
-<meta property="og:site_name" content="{{ site.description }}" />
-<meta property="og:type" content="object" />
-<meta property="og:title" content="{{ site.name }}" />
-<meta property="og:url" content="{{ page.url | prepend: site.baseurl | prepend: site.url }}" />
-<meta property="og:description" content="{{ page.title }}" />
-<meta property="og:image" content="{%- if page.og_image -%}{{ page.og_image }}{%- else -%}{{ site.og_image }}{%- endif -%}" />
-{% endif %}
+ <!-- Fonts & Icons -->
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/{{ site.fontawesome.version }}/css/all.min.css" integrity="{{ site.fontawesome.integrity }}" crossorigin="anonymous">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/academicons/{{ site.academicons.version }}/css/academicons.min.css" integrity="{{ site.academicons.integrity }}" crossorigin="anonymous">
+ <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:100,300,400,500,700|Material+Icons">
 
-<!-- Bootstrap & MDB -->
-<link href="https://stackpath.bootstrapcdn.com/bootstrap/{{ site.bootstrap.version }}/css/bootstrap.min.css" rel="stylesheet" integrity="{{ site.bootstrap.integrity.css }}" crossorigin="anonymous">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/{{ site.mdb.version }}/css/mdb.min.css" integrity="{{ site.mdb.integrity.css }}" crossorigin="anonymous" />
+ <!-- Code Syntax Highlighting -->
+ <link rel="stylesheet" href="https://gitcdn.link/repo/jwarby/jekyll-pygments-themes/master/{{ site.highlight_theme }}.css" />
 
-<!-- Fonts & Icons -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/{{ site.fontawesome.version }}/css/all.min.css" integrity="{{ site.fontawesome.integrity }}" crossorigin="anonymous">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/academicons/{{ site.academicons.version }}/css/academicons.min.css" integrity="{{ site.academicons.integrity }}" crossorigin="anonymous">
-<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:100,300,400,500,700|Material+Icons">
+ <!-- Styles -->
+ {% if site.icon != empty -%}
+ <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22https://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>{{ site.icon }}</text></svg>">
+ {%- endif %}
+ <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
+ <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
 
-<!-- Code Syntax Highlighting -->
-<link rel="stylesheet" href="https://gitcdn.link/repo/jwarby/jekyll-pygments-themes/master/{{ site.highlight_theme }}.css" />
+ {%- if site.enable_darkmode %}
 
-<!-- Styles -->
-{% if site.icon != empty %}
-<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22https://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>{{ site.icon }}</text></svg>">
-{% endif %}
-<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
-<link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
-
-{% if site.enable_darkmode %}
-<!-- Dark Mode -->
-<script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
-<script src="{{ '/assets/js/dark_mode.js' | relative_url }}"></script>
-{% endif %}
+ <!-- Dark Mode -->
+ <script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
+ <script src="{{ '/assets/js/dark_mode.js' | relative_url }}"></script>
+ {%- endif -%}