Skip to content

feat: add Open Graph and Twitter Card meta tags#36

Merged
engineervix merged 2 commits into
engineervix:mainfrom
juan-lorenzo-bot:feat/og-social-meta-tags
Jun 26, 2026
Merged

feat: add Open Graph and Twitter Card meta tags#36
engineervix merged 2 commits into
engineervix:mainfrom
juan-lorenzo-bot:feat/og-social-meta-tags

Conversation

@juan-lorenzo-bot

Copy link
Copy Markdown
Contributor

Summary

Generate Open Graph and Twitter Card <meta> tags in <head> so pages render correctly when shared on social platforms.

Changes

Config (internal/config/config.go)

  • Add [site] og_image option for a default social preview image URL

Frontmatter (internal/nav/frontmatter.go)

  • Add per-page image: field to override the site-level default

Types & wiring

  • Site.OGImage — propagated through nav.NewSite from config.SiteConfig
  • Page.Image — populated from frontmatter in walker.go
  • PageData.OGURL and PageData.OGImage — computed in renderPage and passed to templates

Template (templates/layout.html)

Render the following tags in <head>, only when base_url is set:

<meta property="og:type" content="website">
<meta property="og:title" content="Page Title — Site Title">
<meta property="og:description" content="Page description">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:site_name" content="Site Title">
<meta property="og:image" content="...">  <!-- only if og_image or page image is set -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="...">
<meta name="twitter:description" content="...">
<meta name="twitter:image" content="...">  <!-- only if image is set -->

Tests (internal/builder/og_test.go)

  • TestOGURL — 4 sub-tests: https base_url, trailing slash, root page, no base_url
  • TestOGImage — 4 sub-tests: page override, site fallback, neither set, page-only

Behaviour

Scenario Result
base_url not set All OG/Twitter tags omitted
base_url set, no og_image Tags rendered, og:image omitted
base_url set, [site] og_image configured Tags rendered with og:image
Per-page image: in frontmatter Overrides site og_image for that page

Verification

$ go build ./...        #
$ go test ./...         # ✓ all tests pass
$ ./kwelea build        # ✓ 8 pages built
$ grep "og:type" site/getting-started/index.html
<meta property="og:type" content="website">
$ grep "og:url" site/getting-started/index.html
<meta property="og:url" content="https://engineervix.github.io/kwelea/getting-started/">

Closes #11

- Add [site] og_image config option for default social preview image
- Add per-page image: frontmatter field to override the site default
- Wire OGImage through Site and Image through Page/frontmatter/walker
- Add OGURL and OGImage to PageData, computed in renderPage
- Render OG and Twitter Card meta tags in layout.html <head>
- Only render when base_url is set (og:url requires absolute URLs)
- Add tests for ogURL and ogImage helper functions

Closes engineervix#11

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds Open Graph and Twitter Card metadata generation to the site builder so rendered pages include correct social sharing previews, with site-level and per-page image configuration.

Changes:

  • Introduces [site] og_image config plus per-page image: frontmatter override.
  • Computes og:url and resolved og:image during page rendering and passes them into templates.
  • Renders OG/Twitter <meta> tags in templates/layout.html when base_url is configured, with test coverage for URL/image selection logic.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
templates/layout.html Conditionally renders OG/Twitter meta tags in <head> based on computed OGURL/OGImage.
internal/nav/walker.go Propagates image: frontmatter into Page.Image.
internal/nav/types.go Adds Site.OGImage and Page.Image fields for social preview images.
internal/nav/nav.go Wires cfg.Site.OGImage into nav.Site.
internal/nav/frontmatter.go Parses per-page image: frontmatter key.
internal/config/config.go Adds [site] og_image config option.
internal/builder/og_test.go Adds tests for og:url and og:image selection behavior.
internal/builder/builder.go Computes OGURL/OGImage during render and exposes them to templates.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread internal/builder/builder.go
Comment thread internal/builder/builder.go
Comment thread templates/layout.html
- ogURL now uses hasScheme() so a relative base_url ('/kwelea') returns
  empty instead of producing invalid og:url like '/kwelea/getting-started/'
- ogImage resolves relative image paths ('/assets/og.png') against
  base_url when base_url is absolute; absolute image URLs pass through;
  relative base_url leaves relative images as-is
- Add tests: relative base_url, scheme-only base_url, relative image
  resolution (site default, page frontmatter, with/without trailing slash,
  relative base_url edge case)

Addresses Copilot review feedback on PR engineervix#36
@juan-lorenzo-bot

Copy link
Copy Markdown
Contributor Author

All three points addressed in 6574e39:

1. ogURL scheme check — now uses hasScheme() (same helper as the sitemap), so a relative base_url (/kwelea) or scheme-only base_url (https://) returns empty. Matches the sitemap's behaviour for consistency.

2. ogImage relative-path resolution — when base_url is an absolute URL, a relative image path like /assets/og.png is now resolved against base_url. Absolute image URLs pass through unchanged. Added 4 new test cases covering both behaviours.

3. og:type = "website" — agreed, "website" is the right choice. The issue's example output shows article, but kwelea pages are docs/guides, not individual news/blog posts, so website is more accurate. The OG spec allows this; it just affects how some platforms categorise the link previews.

@engineervix engineervix merged commit f5d0570 into engineervix:main Jun 26, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Open Graph and social meta tags

3 participants