Add robots.txt and sitemap.xml templates for SEO optimization

- Created robots.njk to allow all user agents and specify sitemap location.
- Created sitemap.njk to generate an XML sitemap for all HTML pages in the site.

Author: alekswebnet

src/_data/site.js

@@ -21,6 +21,9 @@ export default {
   name: "Missing Elements",
   url: "https://missing-elements.github.io",
   github: "https://github.com/missing-elements",
+  // Google Search Console's code for the site, from the "HTML tag" check of its URL-prefix property,
+  // https://missing-elements.github.io/: base.njk writes it on every page while it is set.
+  googleSiteVerification: "_z8PPC9AkWc2rKheTsM0kGmM6UA6FLfgMf0aRxDzULU",
   elements: [
     {
       name: "pdfjs-viewer",
@@ -42,7 +45,7 @@ export default {
   // A tool's GitHub link is its source. The build page links the skill's page itself.
   tools: [
     {
-      name: "Build an H5P activity",
+      name: "Build an H5P activity with AI",
       description: "Describe a lesson to an AI chat and get an H5P activity, from a quiz to a branching scenario: play it, and download a .h5p file for Moodle or any other H5P site. Free, and nothing is uploaded.",
       page: "/h5p/build/",
       repo: "https://github.com/missing-elements/missing-elements.github.io/tree/main/src/h5p/build",

src/_includes/base.njk

@@ -13,8 +13,22 @@
   <title>{{ title }}</title>
   <meta name="description" content="{{ description }}">
   <link rel="canonical" href="{{ site.url }}{{ page.url }}">
+  {%- if site.googleSiteVerification %}
+  <meta name="google-site-verification" content="{{ site.googleSiteVerification }}">
+  {%- endif %}
+  <meta property="og:type" content="website">
+  <meta property="og:site_name" content="{{ site.name }}">
+  <meta property="og:url" content="{{ site.url }}{{ page.url }}">
   <meta property="og:title" content="{{ title }}">
   <meta property="og:description" content="{{ description }}">
+  {#- The picture a shared link shows, where the page names one (`socialImage` in its front matter). -#}
+  {%- if socialImage %}
+  <meta property="og:image" content="{{ site.url }}{{ socialImage.src }}">
+  <meta property="og:image:width" content="{{ socialImage.width }}">
+  <meta property="og:image:height" content="{{ socialImage.height }}">
+  <meta property="og:image:alt" content="{{ socialImage.alt }}">
+  <meta name="twitter:card" content="summary_large_image">
+  {%- endif %}
   <link rel="icon" href="/assets/logo.svg" type="image/svg+xml">
   <link rel="stylesheet" href="/assets/site.css">
   {%- block head %}{% endblock %}

src/assets/og-h5p-build.png

@@ -589,7 +589,7 @@ tbody th a:hover code { text-decoration: underline; }
 
 /* A bar at the top, then bands the width of the window, each holding a column of the page's width. */
 :root {
-  --wide: 76rem;
+  --wide: 85rem;
   --gutter: clamp(1rem, 4vw, 3rem);
   --band-space: clamp(3.5rem, 2rem + 6vw, 7rem);
 }

src/assets/site.css

@@ -1,7 +1,17 @@
 ---
 layout: base.njk
-title: Build an H5P activity · Missing Elements
-description: Describe a lesson to an AI chat and get an H5P activity to play, a quiz, a branching scenario, an interactive book and more, as a .h5p file for Moodle or any other H5P site. Free, built in your browser, nothing uploaded.
+# The title and description carry what people search for: an AI H5P generator, with ChatGPT and the
+# like. The description counts the types as the hero does, in the release the page runs.
+title: "Free AI H5P generator: make H5P with ChatGPT, Claude or Grok"
+eleventyComputed:
+  description: "Describe a lesson to ChatGPT, Claude or Grok and get an H5P activity: a quiz, a course presentation or any of {{ skill.offered.length }} H5P types. Free, no account, for Moodle."
+# The picture a shared link shows: the page's first screen at 1200×630, light, with the sample
+# settled. It is a screenshot, so take it again when that screen changes.
+socialImage:
+  src: /assets/og-h5p-build.png
+  width: 1200
+  height: 630
+  alt: "The build page: its headline, Build an H5P activity with AI, and a course presentation playing beside it."
 # The page's only policy: GitHub Pages sends no headers. base.njk writes it first in <head>, and the
 # page's inline scripts, the site's color-scheme script and the one below, are added to script-src
 # by their hashes at build (eleventy.config.js).
@@ -35,7 +45,7 @@ csp: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' da
   <section class="hero" aria-labelledby="page-title">
     <div class="wrap hero-grid">
       <div class="hero-words">
-        <h1 id="page-title">Build an H5P activity</h1>
+        <h1 id="page-title">Build an H5P activity with AI</h1>
         {#- The types are those the skill's table offers to choose from, in the release the page runs:
             counted from it (src/_data/skill.js), and linked at its tag. -#}
         <p class="lead when-unlinked">
@@ -301,4 +311,22 @@ csp: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' da
     <p>Found a mistake? <a href="https://github.com/missing-elements/missing-elements.github.io/blob/main/{{ page.inputPath | replace('./', '') }}">Edit this page</a> or <a href="https://github.com/missing-elements/h5p-offline-player/issues">open an issue</a>.</p>
   </div>
 </footer>
+{#- What the page is, for a search engine: a free web application for teaching, run in the browser.
+    It is data, not a script that runs; the policy's hash for it (eleventy.config.js) is unused. -#}
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "WebApplication",
+  "name": "AI H5P generator",
+  "alternateName": "Build an H5P activity with AI",
+  "url": "{{ site.url }}{{ page.url }}",
+  "description": {{ description | dump | safe }},
+  "applicationCategory": "EducationalApplication",
+  "operatingSystem": "Any",
+  "browserRequirements": "Requires JavaScript",
+  "isAccessibleForFree": true,
+  "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
+  "publisher": { "@type": "Organization", "name": "{{ site.name }}", "url": "{{ site.url }}" }
+}
+</script>
 <script type="module" src="/h5p/build/build-page.js"></script>

src/h5p/build/index.njk

@@ -0,0 +1,9 @@
+---
+permalink: /robots.txt
+eleventyExcludeFromCollections: true
+---
+# Everything is open: the h5p-author skill's files too, since a chat's fetch tool may obey this file.
+User-agent: *
+Allow: /
+
+Sitemap: {{ site.url }}/sitemap.xml

src/robots.njk

@@ -0,0 +1,14 @@
+---
+permalink: /sitemap.xml
+eleventyExcludeFromCollections: true
+---
+<?xml version="1.0" encoding="utf-8"?>
+{#- The site's pages, for search engines: what is written as HTML. A data file such as
+    /h5p/skill/index.json is a template too, and the skill's files are copied, not written. -#}
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+{%- for entry in collections.all %}
+{%- if entry.outputPath and entry.outputPath.endsWith(".html") %}
+  <url><loc>{{ site.url }}{{ entry.url }}</loc></url>
+{%- endif %}
+{%- endfor %}
+</urlset>