Merge pull request #61 from randovania/feature/seo

SEO and embed improvements
randovania · May 9, 2024 · 3e7f849 · 3e7f849
2 parents a35d722 + 7a86f9b
commit 3e7f849
Show file tree

Hide file tree

Showing 15 changed files with 350 additions and 94 deletions.
diff --git a/Gemfile b/Gemfile
@@ -2,4 +2,4 @@ source "https://rubygems.org"
 
 gem "github-pages", group: :jekyll_plugins
 gem 'wdm', '>= 0.1.0' if Gem.win_platform?
-gem "webrick", "~> 1.8"
+gem "webrick", "~> 1.8"
diff --git a/_config.yml b/_config.yml
@@ -1,5 +1,6 @@
 ### Site Settings ###
 title               : Randovania
+tagline             : A randomizer platform for a multitude of games
 description         : A randomizer platform for a multitude of games.
 baseurl             : ""
 repository          : randovania/randovania.github.io
@@ -12,6 +13,7 @@ logo                : /assets/randovania.png
 ### Plugins ###
 plugins:
   - jemoji
+  - jekyll-sitemap
 
 
 ### Navbar Settings ###
@@ -59,6 +61,8 @@ defaults:
       type: "games"
     values:
       layout: "game"
+      uses-game-image: true
+      itemtype: "https://schema.org/FAQPage"
   - scope:
       path: ""
       type: "redirects"
@@ -69,11 +73,19 @@ defaults:
       type: "videos"
     values:
       layout: "video_db"
+      uses-game-image: true
+      itemtype: "https://schema.org/VideoGallery"
   - scope:
       path: ""
       type: "posts"
     values:
-      comments: false                                   # Set to true to enable disqus comments
+      comments: false # Set to true to enable disqus comments
+      itemtype: "https://schema.org/WebPage"
+  - scope:
+      path: ""
+      type: "pages"
+    values:
+      itemtype: "https://schema.org/WebPage"
 
 
 ### Exclude from processing ###

diff --git a/_includes/breadcrumbs.html b/_includes/breadcrumbs.html
@@ -0,0 +1,54 @@
+{% assign crumbs = page.url | remove: '/index.html' | split: '/' %}
+<nav aria-label="breadcrumb">
+  <ol
+    class="breadcrumb"
+    itemscope
+    itemtype="https://schema.org/BreadcrumbList">
+    {% for crumb in crumbs %}
+      {%- if forloop.first -%}
+        {%- assign crumb_name = "Home" -%}
+      {%- else -%}
+        {%- assign crumb_name = crumb | replace: '-', ' ' | remove: '.html' | capitalize -%}
+      {%- endif -%}
+
+      {%- for game in site.games -%}
+        {%- if game.slug == crumb -%}
+          {%- assign crumb_name = game.long-name -%}
+          {%- break -%}
+        {%- endif -%}
+      {%- endfor -%}
+
+      {%- if forloop.last -%}
+        {%- if page.collection == 'posts' -%}
+          {%- assign crumb_name = page.title | default: crumb_name -%}
+        {%- endif -%}
+        {%- capture crumb_props -%}
+                    class="breadcrumb-item active" aria-current="page"
+                {%- endcapture -%}
+        {%- assign open_wrapper = "" -%}
+        {%- assign close_wrapper = "" -%}
+      {%- else -%}
+        {%- assign crumb_limit = forloop.index -%}
+        {%- capture crumb_props -%}class="breadcrumb-item"{%- endcapture -%}
+        {%- capture href -%}
+                    {%- for inner_crumb in crumbs limit: crumb_limit %}{{ inner_crumb | append: '/' }}{%- endfor -%}
+                {%- endcapture -%}
+        {%- capture open_wrapper -%}
+                    <a itemprop="item" href="{{ href }}">
+                {%- endcapture -%}
+        {%- assign close_wrapper = "</a>" -%}
+      {%- endif -%}
+
+      <li
+        {{ crumb_props }}
+        itemprop="itemListElement"
+        itemscope
+        itemtype="https://schema.org/ListItem">
+        {{ open_wrapper }}<span itemprop="name">{{ crumb_name }}</span>
+        {{ close_wrapper }}
+        <meta itemprop="position" content="{{ forloop.index }}" />
+      </li>
+
+    {%- endfor -%}
+  </ol>
+</nav>
diff --git a/_includes/head.html b/_includes/head.html
@@ -1,22 +1,18 @@
 <head>
-  {% assign title = page.title | default: site.title | escape %} {% assign description = page.description | default:
-  site.description | strip_html | strip_newlines | truncate: 160 %} {% assign image = page.image | default:
-  site.author.image %} {% if page.name and page.collection == 'projects' %} {% assign title = page.name | escape %} {%
-  endif %}
-
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-  <meta property="og:type" content="website" />
-  <meta property="og:title" content="{{ title }}" />
-  <meta property="og:description" content="{{ description }}" />
-  <meta property="og:image" content="{{ image }}" />
+  {%- if page.noindex or page.collection == 'games' and page.development-state != stable -%}
+    <meta name="robots" content="noindex" />
+  {%- endif -%}
 
-  <title>{{ title }}</title>
-  <meta name="description" content="{{ description }}" />
+  {% include seo.html %}
 
-  <link rel="shortcut icon" type="image/x-icon" href="{{ '/assets/favicon.ico' | relative_url }}" />
+  <link
+    rel="shortcut icon"
+    type="image/x-icon"
+    href="{{ '/assets/favicon.ico' | relative_url }}" />
 
   <!-- Theme style -->
   <script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
@@ -26,20 +22,18 @@
     rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/[email protected]/css/fork-awesome.min.css"
     integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY="
-    crossorigin="anonymous"
-  />
+    crossorigin="anonymous" />
 
-  <!-- Bootstrap CSS CDN -->
+    <!-- Bootstrap CSS CDN -->
   <link
     href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
     rel="stylesheet"
     integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
-    crossorigin="anonymous"
-  />
+    crossorigin="anonymous" />
 
-  <!-- Animate CSS CDN -->
+    <!-- Animate CSS CDN -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css" />
 
-  <!-- Custom CSS -->
+    <!-- Custom CSS -->
   <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}" />
-</head>
+</head>
diff --git a/_includes/seo.html b/_includes/seo.html
@@ -0,0 +1,125 @@
+{% comment %} Store game name for later, if relevant {% endcomment %}
+{%- if true -%}
+  {%- assign games == false -%}
+  {%- assign videos == false -%}
+
+  {%- if page.collection == 'games' -%}
+
+    {%- assign games = true -%}
+    {%- assign game-name = page.long-name -%}
+
+  {%- elsif page.collection == 'videos' -%}
+
+    {%- for game in site.games -%}
+      {%- if game.title == page.title -%}
+        {%- assign videos = true -%}
+        {%- assign game-name = game.long-name -%}
+        {%- break -%}
+      {%- endif -%}
+    {%- endfor -%}
+
+  {%- endif -%}
+{%- endif -%}
+
+{%- comment -%} Page Title {%- endcomment -%}
+{%- if true -%}
+  {% comment %} Game pages/Video DBs {% endcomment %}
+  {%- if games -%}
+    {%- assign title = game-name -%}
+  {%- elsif videos -%}
+    {%- capture title -%}
+      Video Database | {{ game-name }}
+    {%- endcapture -%}
+  {%- endif -%}
+
+  {%- comment -%} Default {%- endcomment -%}
+  {%- if title == nil -%}
+    {%- assign title = page.title | default: site.title -%}
+  {%- endif -%}
+
+  {% comment %} Full title {% endcomment %}
+  {%- if title == site.title -%}
+    {% comment %} Main page {% endcomment %}
+    {%- capture full-title -%}
+      {{ site.title }} | {{ site.tagline | default: site.description }}
+    {%- endcapture -%}
+  {%- else -%}
+    {% comment %} Standard pages {% endcomment %}
+    {%- capture full-title -%}
+      {{ title }} | {{ site.title }}
+    {%- endcapture -%}
+  {%- endif -%}
+{%- endif -%}
+
+{% comment %} Page Description {% endcomment %}
+{%- if true -%}
+  {%- assign description = page.description | default: site.description -%}
+
+  {% comment %} Game pages {% endcomment %}
+  {%- if games -%}
+    {%- capture description -%}
+      A randomizer for {{ game-name }} and many other games.
+    {%- endcapture -%}
+  {%- endif -%}
+
+  {% comment %} Video DBs {% endcomment %}
+  {%- if videos -%}
+    {%- capture description -%}
+      A collection of videos detailing tricks for Randovania's {{ game-name }} randomizer.
+    {%- endcapture -%}
+  {%- endif -%}
+
+  {%- assign description = description | strip_html | strip_newlines | truncate: 160 -%}
+{%- endif -%}
+
+{% comment %} Page Image {% endcomment %}
+{%- if true -%}
+  {%- assign image = page.image | default: site.logo -%}
+  {%- assign image-alt = page.image-alt -%}
+  {%- if image == site.logo and image-alt == nil -%}
+    {%- assign image-alt = "Randovania's Logo" -%}
+  {%- endif -%}
+
+  {% comment %} Game pages and video DBs {% endcomment %}
+  {%- if page.uses-game-image -%}
+      {%- capture image -%}/assets/games/{{ page.slug }}.png{%- endcapture -%}
+      {%- if game-name != nil -%}
+        {%- capture image-alt -%}Cover art for {{ game-name }}{%- endcapture -%}
+      {%- endif -%}
+  {%- endif -%}
+
+  {%- capture image-url -%}{{ site.url }}{{ image }}{%- endcapture -%}
+{%- endif -%}
+
+{% comment %} Canonical URL {% endcomment %}
+{%- capture canonical-url -%}{{ site.url }}{{ page.url }}{%- endcapture -%}
+
+<!-- Begin SEO tags -->
+<title>{{ full-title | strip_html }}</title>
+<meta name="description" content="{{ description }}" />
+<link rel="canonical" href="{{ canonical-url }}" />
+<link rel="author" href="{{ site.url }}/about" />
+
+<!-- OpenGraph -->
+<meta property="og:title" content="{{ title | strip_html }}" />
+<meta property="og:locale" content="en_US" />
+<meta property="og:description" content="{{ description }}" />
+<meta property="og:url" content="{{ canonical-url }}" />
+<meta property="og:site_name" content="{{ site.title }}" />
+<meta property="og:image" content="{{ image-url }}" />
+<meta property="og:image:alt" content="{{ image-alt }}" />
+
+{% if page.collection == 'posts' -%}
+  <meta property="og:type" content="article" />
+  <meta property="article:published_time" content="{{ page.date | date_to_xmlschema }}" />
+  {% for tag in page.tags -%}
+    <meta property="article:tag" content="{{ tag }}" />
+  {% endfor -%}
+{%- else -%}
+  <meta property="og:type" content="website" />
+{%- endif %}
+
+<!-- Twitter -->
+<meta name="twitter:card" content="summary" />
+
+<!-- End SEO tags -->
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -5,12 +5,18 @@
   Free for personal and commercial use under the MIT license
   https://github.com/YoussefRaafatNasry/portfolYOU
 -->
-
-<html lang="en" class="h-100">
+<html
+  lang="en"
+  class="h-100"
+  itemscope
+  itemtype="{{ page.itemtype }}">
   {% include head.html %}
 
   <body class="h-100 d-flex flex-column">
-    <main class="flex-shrink-0 container mt-5">{% include navbar.html %} {{ content }}</main>
+    <main class="flex-shrink-0 container mt-5">
+      {% include navbar.html %}
+      {{ content }}
+    </main>
     {% include footer.html %} {% include analytics.html %} {% include scripts.html %}
   </body>
-</html>
+</html>