-
-
Notifications
You must be signed in to change notification settings - Fork 94
Description
Problem
The Open Graph (OG) meta tags in _includes/head.html contain several bugs that cause incorrect or missing link previews when the preCICE website is shared on social media platforms (LinkedIn, Facebook, Mastodon, Slack, etc.) and may reduce search engine indexing quality.
1. og:url renders as a literal string instead of the actual page URL
<meta property="og:url" content="{{ 'page.url' | absolute_url }}" />Because page.url is quoted, Liquid treats it as the string "page.url" rather than the variable page.url. Every page on the site currently advertises https://precice.org/page.url as its URL to crawlers and social platforms.
2. og:image references an SVG file
<meta property="og:image" content="{{ 'images/icon.svg' | absolute_url }}" />Most social media platforms (Facebook, LinkedIn, Twitter/X) do not support SVG for Open Graph images and will show no preview image. The site already has a suitable PNG at images/icon-310x310.png.
3. og:description has no fallback
Pages without a summary front matter field (including the landing page) emit no og:description tag at all. _config.yml already defines a description field that could serve as a fallback.
4. No Twitter Card meta tags
The site does not include any twitter:card, twitter:title, twitter:description, or twitter:image meta tags, so links shared on Twitter/X have no rich preview.
5. Minor typo
The comment on line 24 reads <!-- Cannonical link --> (double "n").
Why it matters
- Discoverability: Broken
og:urlcan confuse crawlers and harm SEO. - Social sharing: Researchers and community members sharing preCICE links on social media, Slack workspaces, or Discourse see broken or missing previews, reducing click-through rates.
- Minimal risk: The fix is confined to 5 meta tags in a single include file and adds Twitter Card support.
Suggested fix
- Remove quotes around
page.urlso Liquid evaluates the variable. - Replace
icon.svgwithicon-310x310.pngfor the OG/Twitter image. - Add a fallback to
site.descriptionwhenpage.summaryis not set (for bothog:descriptionand the standardmeta description). - Add Twitter Card meta tags (
twitter:card,twitter:title,twitter:description,twitter:image). - Fix the "Cannonical" → "Canonical" typo.