Add Open Graph metadata with global and page-specific props #892
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Adds Open Graph (OG) metadata support with per-page overrides, including dedicated OG images for the A01–A10 pages.
Specifically, it:
main.htmlto centralize OG metadata output and extendbase.html.type"article" to A01–A10 pages and "website" to other pages by default.- OWASP Top 10appended for consistency.Pages without front matter (or missing properties) will fall back to the global OG defaults.
All OG images use established branding already present in the site (fonts, logos, colors, and visual style).
Note (while in draft stage)
Open Graph is metadata used by social platforms and many other apps to generate a preview card when a URL is shared. Each page can provide its own OG metadata, or inherit a global default. Generally an image, a short title and a description (up to around 150 or so characters before truncation) are displayed. For best link-preview rendering on high-resolution displays, OG images are typically authored at ~1200×630 (1.91:1), and key content should be kept safely centered since many UIs crop them into square previews.
Titles/descriptions may be truncated or omitted entirely depending on platform and UI.
Testing
You can visit this demo site top10.ritovision.com and then in any page check via browser dev tools inside the
<head>for<meta property="og:*">tags. You should see metadata corresponding to the front matter in md files or falling back to globals found inmain.html.