feat: og image and meta description #538
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <link rel="icon" href="https://nodejs.org/static/images/favicons/favicon.png"/> | ||
| <title>{{title}}</title> | ||
| <meta name="description" content="Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts."> |
There was a problem hiding this comment.
I'm open to suggestions for a better description
There was a problem hiding this comment.
What did we use on nodeJS.org ?
There was a problem hiding this comment.
This one is the same as the one we use on the nodejs.org
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #538 +/- ##
==========================================
+ Coverage 79.82% 80.11% +0.28%
==========================================
Files 121 123 +2
Lines 12017 12144 +127
Branches 840 856 +16
==========================================
+ Hits 9593 9729 +136
+ Misses 2421 2412 -9
Partials 3 3 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
This PR adds Open Graph (OG) meta tags and a meta description to the web generator's HTML template to improve how API documentation pages appear when shared on social media and in search results. This addresses part of issue #535 which requested adding meta descriptions and reusing OG images from the main Node.js website.
Key Changes
- Added meta description tag with Node.js standard description
- Added OG meta tags (og:title, og:description, og:image) for social media sharing
- Modified template processing to support dynamic OG image URL generation using the page title
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| src/generators/web/template.html | Added meta description and Open Graph tags for social media preview support |
| src/generators/web/utils/processing.mjs | Modified to create title variable and generate URL-encoded title for OG image placeholder replacement |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <link rel="stylesheet" href="styles.css" /> | ||
| <meta property="og:title" content="{{title}}"> | ||
| <meta property="og:description" content="Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts."> | ||
| <meta property="og:image" content="https://nodejs.org/en/next-data/og/announcement/{{ogTitle}}" /> |
There was a problem hiding this comment.
The Open Graph meta tags are missing the og:url property, which is recommended by the Open Graph protocol. This property should contain the canonical URL of the page. Consider adding a meta tag like: <meta property="og:url" content="{{pageUrl}}"> and passing the appropriate URL through the template replacement.
| <meta property="og:image" content="https://nodejs.org/en/next-data/og/announcement/{{ogTitle}}" /> | |
| <meta property="og:image" content="https://nodejs.org/en/next-data/og/announcement/{{ogTitle}}" /> | |
| <meta property="og:url" content="{{pageUrl}}"> |
| <meta property="og:title" content="{{title}}"> | ||
| <meta property="og:description" content="Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts."> | ||
| <meta property="og:image" content="https://nodejs.org/en/next-data/og/announcement/{{ogTitle}}" /> | ||
|
|
There was a problem hiding this comment.
Consider adding an og:type meta tag, which is a required property according to the Open Graph protocol. For documentation pages, the appropriate value would be "website" or "article". Add: <meta property="og:type" content="website">
| <meta property="og:type" content="website"> |
|
Also what if we statically generate og image on this side ? |
Why? We already have it on our website, why add complexity here? |
Maybe because if the URL changes (which I hope never happens), the OG image would no longer work. By generating it here, that problem wouldn’t exist. |
I think we also cannot use these images in a scenario where the website is statically exported, but I agree that there is a cost to creating them |
4 participants
Description
With this PR, we aim to use the OG images / meta descriptions from the website with the new web generator as well
Validation
In the preview should contain og image content and display it correctly
Related Issues
#535
Check List
node --run testand all tests passed.node --run format&node --run lint.