Add OG image and social preview meta tags

.github/actions/deploy-to-github-pages/action.yml

@@ -94,6 +94,14 @@ runs:
         npm install @playwright/test &&
         node script/html-to-pdf.js -i public/cheat-sheet.html
 
+    - name: render per-page Open Graph cards
+      shell: bash
+      run: |
+        # Every manual page gets its own OG card (command name + one-line
+        # tagline, embedded at render time with the current version), so each
+        # docs URL has a distinct social preview. See script/render-og-cards.js.
+        node script/render-og-cards.js --out public/images/og
+
     - name: run Pagefind ${{ env.PAGEFIND_VERSION }} to build the search index
       shell: bash
       run: npx -y pagefind@${{ env.PAGEFIND_VERSION }} --site public --write-playground

.github/workflows/update-git-version-and-manual-pages.yml

@@ -65,6 +65,33 @@ jobs:
       - name: prepare worktree
         if: steps.commit.outputs.result != '' || inputs.force-rebuild == true
         run: git sparse-checkout disable
+      - uses: actions/setup-node@v5
+        if: steps.commit.outputs.result != ''
+      - name: regenerate OG image for the new version
+        if: steps.commit.outputs.result != ''
+        run: |
+          # The card embeds the current version (see script/render-og-card.js), so
+          # regenerate it whenever a new Git version is recorded in hugo.yml.
+          HUGO_VERSION="$(sed -n 's/^ *hugo_version: *//p' <hugo.yml)"
+          curl -Lo /tmp/hugo.deb "https://github.com/gohugoio/hugo/releases/download/v$HUGO_VERSION/hugo_extended_${HUGO_VERSION}_linux-amd64.deb"
+          sudo dpkg -i /tmp/hugo.deb
+          npm install playwright >/dev/null
+          npx playwright install chromium >/dev/null
+          node script/render-og-card.js
+          git add static/images/og-image.png &&
+          if git diff-index --cached --quiet HEAD -- static/images/og-image.png
+          then
+            echo '::notice::OG image unchanged' >&2
+            exit 0
+          fi &&
+          version='${{ steps.commit.outputs.result }}' &&
+          git \
+            -c user.name=${{ github.actor }} \
+            -c user.email=${{ github.actor }}@noreply.github.com \
+            commit -m "Update OG image for Git $version" \
+              -m 'Regenerated via the `update-git-version-and-manual-pages.yml` GitHub workflow.' \
+              -- static/images/og-image.png &&
+          echo "result=modified" >>$GITHUB_OUTPUT
       - name: clone git.git
         if: steps.commit.outputs.result != '' || inputs.force-rebuild == true
         run: git clone --bare https://github.com/git/git '${{ runner.temp }}/git'

layouts/_default/baseof.html

@@ -63,6 +63,23 @@ <h1>Redirecting&hellip;</h1>
 
   <title>{{ .Page.Title | default "Git" }}{{ if (isset .Params "subtitle") }} - {{ .Params.subtitle }}{{ end }}</title>
 
+  {{ $og_image := "https://git-scm.com/images/og-image.png" }}
+  {{ if (isset .Params "docname") }}{{ $og_image = printf "https://git-scm.com/images/og/%s.png" .Params.docname }}{{ end }}
+
+  <meta property="og:site_name" content="Git" />
+  <meta property="og:title" content="{{ .Page.Title | default "Git" }}{{ if (isset .Params "subtitle") }} - {{ .Params.subtitle }}{{ end }}" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://git-scm.com{{ .Page.RelPermalink }}" />
+  <meta property="og:image" content="{{ $og_image }}" />
+  <meta property="og:image:type" content="image/png" />
+  <meta property="og:image:width" content="1200" />
+  <meta property="og:image:height" content="630" />
+  <meta property="og:description" content="Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency." />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="{{ .Page.Title | default "Git" }}{{ if (isset .Params "subtitle") }} - {{ .Params.subtitle }}{{ end }}" />
+  <meta name="twitter:description" content="Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency." />
+  <meta name="twitter:image" content="{{ $og_image }}" />
+
   <link href="{{ relURL "favicon.ico" }}" rel='shortcut icon' type='image/x-icon'>
 
   {{ $style := resources.Get "sass/application.scss" | resources.ExecuteAsTemplate "application.scss" . | css.Sass | resources.Minify | fingerprint }}