Add support for open graph, twitter and schema.org

src/Gemfile

@@ -22,11 +22,6 @@ group :jekyll_plugins do
 
   # Used to generate (meta) tags for search engine optimization (SEO).
   # - https://github.com/jekyll/jekyll-seo-tag
-
-  gem "jekyll-seo-tag"
-
-  # Used to add support for pagination. Especially useful for the next plugin that generates a page for each category.
-  # - https://github.com/jekyll/jekyll-paginate
 
   gem "jekyll-paginate"
 

src/_config.yml

@@ -13,7 +13,6 @@ baseurl: ""
 plugins_dir: _plugins
 plugins:
   - jekyll-feed
-  - jekyll-seo-tag
   - jekyll-redirect-from
   - jekyll-github-metadata
   - jekyll-category-pages

src/_includes/head.html

@@ -25,7 +25,7 @@
 
   <link rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}">
 
-  {%- seo -%}
+  {%- include head/seo.html -%}
 
   {%- feed_meta -%}
 

src/_includes/head/seo.html

@@ -0,0 +1,28 @@
+{% comment %} 
+
+Tooling to debug:
+
+- https://cards-dev.x.com/validator/
+- https://developers.facebook.com/tools/debug/ (requires Facebook login)
+- https://www.linkedin.com/post-inspector/
+- https://developers.google.com/search/docs/appearance/structured-data
+
+Note that the tooling only works on what we published, you can't use it
+for debugging your localhost :).
+
+{% endcomment %}
+
+{% if page.title %}
+    <title> {{ site.title }} - {{ page.title }} </title>
+{% else %}
+    <title> {{ site.title }} </title>
+{% endif %}
+
+{% assign url = page.url | default: site.url | absolute_url %}
+
+<link rel="canonical" href="{{ url }}">
+<meta name="robots" content="index, follow">
+
+{%- include head/seo/twitter.html -%}
+{%- include head/seo/opengraph.html -%}
+{%- include head/seo/schema.html -%}

src/_includes/head/seo/opengraph.html

@@ -0,0 +1,51 @@
+{% comment %} 
+
+  The Open Graph Protocol
+
+  References:
+
+  - https://ogp.me/
+  - https://developers.facebook.com/docs/sharing/webmasters/
+
+{% endcomment %}
+
+{% assign url = page.url | default: site.url | absolute_url %}
+{% assign site_name  = site.title %}
+{% assign title = page.title | default: site.title %}
+{% assign description = page.excerpt | default: site.description | strip_html %}
+{% assign image_width = 960 %}
+{% assign image_height = 540 %}
+{% assign image_resolution = image_width | append: "x" | append: image_height  %}
+{% assign image_url = page.image.path | default: "assets/images/default/default-card-image.png" | webp: image_resolution | absolute_url %}
+{% assign image_alt = page.image.alt | default: "TODO: some alternative description of the default image" %}
+
+
+<meta property="og:url" content="{{ url }}" />
+<meta property="og:type" content="article" />
+<meta property="og:title" content="{{ title }}" />
+<meta property="og:description" content="{{ description }}" />
+<meta property="og:image" content="{{ image_url }}">
+<meta property="og:image:alt" content="{{ image_alt }}">
+<meta property="og:image:type " content="image/webp">
+<meta property="og:image:width " content="{{image_width}}">
+<meta property="og:image:height " content="{{image_height}}">
+<meta property="og:site_name " content="{{ site_name }}">
+<meta property="og:locale " content="en_US">
+
+{% if page %}
+
+    {% assign page_published_date = page.date | date: "%Y-%m-%dT%H:%M:%SZ" %}
+    {% assign page_modified_date = page.date | date: "%Y-%m-%dT%H:%M:%SZ" %}
+
+    <meta property="article:published_time" content="{{ page_published_date }}">
+    <meta property="article:modified_time" content="{{ page_modified_date }}">
+
+    <meta property="article:author" content="{{ site.url }}">
+
+    <meta property="article:section" content="General">
+    <meta property="article:tag" content="FAForever">
+    {% for category in page.categories %}
+        <meta property="article:tag" content="{{ category | capitalize }}">
+    {% endfor %}
+
+{% endif %}

src/_includes/head/seo/schema.html

@@ -0,0 +1,61 @@
+{% comment %} 
+
+  Schema.org
+
+  References:
+
+  - https://schema.org/
+
+{% endcomment %}
+
+{% assign url = page.url | default: site.url | absolute_url %}
+{% assign site_name  = site.title %}
+{% assign title = page.title | default: site.title %}
+{% assign logo = "assets/favicons/favicon-96x96.png" | absolute_url  %}
+{% assign description = page.excerpt | default: site.description | strip_html %}
+{% assign image_width = 960 %}
+{% assign image_height = 540 %}
+{% assign image_resolution = image_width | append: "x" | append: image_height  %}
+{% assign image_url = page.image.path | default: "assets/images/default/default-card-image.png" | webp: image_resolution | absolute_url %}
+{% assign image_alt = page.image.alt | default: "TODO: some alternative description of the default image" %}
+
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "NewsArticle",
+  "headline": "{{ page.title }}",
+  "author": {
+    "@type": "Organization",
+    "name": "FAForever",
+    "url": "{{ "" | absolute_url }}",
+    "logo": "{{ logo }}",
+    "sameAs": [
+      "https://twitter.com/FAFOfficial_",
+      "https://www.youtube.com/@ForgedAllianceForever",
+      "https://www.twitch.tv/faflive",
+      "https://github.com/FAForever",
+      "https://faforever.com",
+      "https://www.patreon.com/faf",
+      "https://discord.gg/mXahVSKGVb"
+    ]
+  },
+  "datePublished": "{{ page.date | date_to_xmlschema }}",
+    {% comment %} 
+        TODO: Technically the date modified field is wrong, and we should compute some modified date depending on the last git commit. Practically however this will be often correct as news items usually do not receive updates.
+    {% endcomment %}
+  "dateModified": "{{ default: page.date | date_to_xmlschema }}",
+  "mainEntityOfPage": {
+    "@type": "WebPage",
+    "@id": "{{ url }}"
+  },
+  "image": "{{ image_url }}",
+  "publisher": {
+    "@type": "Organization",
+    "name": "FAForever",
+    "logo": {
+      "@type": "ImageObject",
+      "url": "{{ logo }}"
+    }
+  }
+}
+</script>

src/_includes/head/seo/twitter.html

@@ -0,0 +1,19 @@
+{% comment %} 
+
+References:
+
+- https://developer.x.com/en/docs/x-for-websites/cards/overview/summary
+
+{% endcomment %}
+
+{% assign title = page.title | default: site.title %}
+{% assign description = page.excerpt | default: site.description | strip_html %}
+{% assign image = page.image.path | default: "assets/images/default/default-card-image.png" | webp: "960x540"  | absolute_url %}
+{% assign image_alt = page.image.alt | default: "TODO: some alternative description of the default image" %}
+
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site" content="@FAFOfficial_" />
+<meta name="twitter:title" content="{{ title }}" />
+<meta name="twitter:description" content="{{ description }}" />
+<meta name="twitter:image" content="{{ image }}" />
+<meta name="twitter:image:alt" content="{{ image_alt }}" />