Add OpenGraph/Twitter meta tags for social media preview

Bromeon · Bromeon · commit 5dfeb5af6ca7 · 2024-01-01T21:55:52.000+01:00
diff --git a/website/config.toml b/website/config.toml
@@ -6,7 +6,7 @@
 # The URL the site will be built for
 base_url = "https://godot-rust.github.io"
 
-title = "godot-rust: Rust bindings for the Godot game engine"
+title = "godot-rust: Rust bindings for Godot game engine"
 
 # Whether to automatically compile all Sass files in the sass directory
 compile_sass = false
@@ -70,10 +70,6 @@ title = "Main title"
 image = "https://via.placeholder.com/200"
 image_alt = "Placeholder text describing the index's image."
 
-[extra.default_author]
-name = "John Doe"
-avatar = "https://via.placeholder.com/200"
-avatar_alt = "Placeholder text describing the default author's avatar."
 
 [extra.links]
 github_gdnative = "https://github.com/godot-rust/gdnative"
@@ -92,4 +88,4 @@ favicon_32x32 = "/icons/favicon-32x32.png"
 apple_touch_icon = "/icons/apple-touch-icon.png"
 android_chrome_512 = "/icons/android-chrome-512x512.png"
 android_chrome_192 = "/icons/android-chrome-192x192.png"
-manifest = "/icons/site.webmanifest"
+manifest = "/icons/site.webmanifest"
diff --git a/website/content/_index.md b/website/content/_index.md
@@ -4,8 +4,8 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-title = "godot-rust"
-description = "Rust bindings for Godot"
+title = "Rust bindings for Godot game engine"
+description = "godot-rust"
 template = "home.html"
 +++
 
diff --git a/website/content/godot-ferris-og-dark.png b/website/content/godot-ferris-og-dark.png
diff --git a/website/templates/home.html b/website/templates/home.html
@@ -15,9 +15,7 @@
 <div class="flex items-center flex-col mt-10">
   <img src="{{ get_url(path='godot-ferris-2.png') }}" class="logo-center" alt="godot-rust Ferris with stripes">
 
-  <div class="logo-title mb-12">
-    {{ section.title }}
-  </div>
+  <div class="logo-title mb-12">godot-rust</div>
 
   <!-- Content -->
   <div class="markdown-content">
diff --git a/website/templates/layout.html b/website/templates/layout.html
@@ -42,12 +42,49 @@
       <link id="syntax_highlight" href="#" rel="stylesheet">
       #}
 
+      {#- Custom variables prefixed with 'c_' -#}
+
+      {%- if section -%}
+        {%- set c_page_title = section.title -%}
+      {%- elif page -%}
+        {%- set c_page_title = page.title | replace(from='~', to=' ') -%}
+      {%- else -%}
+        {#- Includes 404.html, which has only a 'config' metadata; see __tera_context variable -#}
+        {%- set c_page_title = config.title -%}
+      {%- endif -%}
+
+      {%- set c_page_summary = 'godot-rust' -%}
+      {%- set c_page_image = get_url(path='godot-ferris-og-dark.png') -%}
+
+      {# Page title #}
       <title>
-        {% block title %}
-        {{ config.title }}
-        {% endblock title %}
+        {%- block title -%}
+        {{ c_page_title }}
+        {%- endblock title -%}
       </title>
-  </head>
+
+      {#
+         OpenGraph meta tags for social media preview
+         Can be tested on https://www.opengraph.xyz or https://metatags.io.
+      #}
+      <!-- OpenGraph meta tags for social media preview -->
+
+      <!-- Discord, Facebook, etc. -->
+      <meta property="og:url" content="{{ get_url(path='.') | safe }}">
+      <meta property="og:type" content="website">
+      <meta property="og:title" content="{{ c_page_title }}">
+      <meta property="og:description" content="{{ c_page_summary }}">
+      <meta property="og:image" content="{{ c_page_image | safe }}">
+
+      <!-- Twitter Meta Tags -->
+      <meta name="twitter:card" content="summary_large_image">
+      <meta property="twitter:domain" content="godot-rust.github.io">
+      <meta property="twitter:url" content="{{ get_url(path='.') | safe }}">
+      <meta name="twitter:title" content="{{ c_page_title }}">
+      <meta name="twitter:description" content="{{ c_page_summary }}">
+      <meta name="twitter:image" content="{{ c_page_image | safe }}">
+
+    </head>
   <body class="body-background dark:body-background flex flex-col h-screen justify-between">
   <!---------------------------------------------------------->
   <!------------------------- NAVBAR ------------------------->
