Skip to content

Fix broken Open Graph meta tags and add Twitter Card support in _includes/head.html #724

@YadavAkhileshh

Description

@YadavAkhileshh

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:url can 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.url so Liquid evaluates the variable.
  • Replace icon.svg with icon-310x310.png for the OG/Twitter image.
  • Add a fallback to site.description when page.summary is not set (for both og:description and the standard meta description).
  • Add Twitter Card meta tags (twitter:card, twitter:title, twitter:description, twitter:image).
  • Fix the "Cannonical" → "Canonical" typo.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions