[stephaniehobson]

Replaces #473, which was approved but merged into react-18-upgrade after that branch had already merged into main, so its change never reached main. This is the same commit, rebased onto main without conflicts.

One-line summary

Add twitter:card and a static og:title so links shared on X, Facebook, Slack and similar sites show a title and the existing og:image as a large preview.

Significant changes and points to review

• Add <meta name="twitter:card" content="summary_large_image"> to index.html.
• Uses https://data.firefox.com/img/ogimage.png which already existed.
• Add a static og:title to index.html. Social crawlers don't run JavaScript, so they never see the og:title that Helmet adds. X falls back to og:title when there is no twitter:title, so one tag covers every platform.
  • The static og:title has data-rh="true". react-helmet-async only replaces tags marked that way, so each page's Helmet og:title replaces it instead of adding a second one.
  • Every route serves the same HTML, so crawlers see "Firefox Public Data Report" on every link, including deep links.
  • The 404 page sets no og:title in Helmet, so Helmet removes the static one there.
• Add og-title.spec.js to check each page ends up with one og:title (its own), including after navigation. Add a jsDisabled.spec.js check for the static tag.

Issue / Bugzilla link

#96

Testing

Run npm start first.

• Run curl -s http://localhost:3000/dashboard/hardware | grep -E 'twitter:card|og:title' and check the static twitter:card and og:title tags are both there.
• Open http://localhost:3000/contact, inspect <head> in devtools, and check there is exactly one og:title, with the content "Contact | Firefox Public Data Report".

[stephaniehobson]

Approved as #473 but then the merge went sideways.