v8.dev
v8.dev copied to clipboard
v8
Add Open Graph / Twitter Card metadata
It would be genuinely wonderful to see Open Graph / Twitter Card metadata added to the site so links are more prettily embedded when shared on social platforms, including the V8 Twitter account.
References:
- https://ogp.me/
- https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards
Great idea!
I suppose one obvious candidate for such metadata is description field we already include on posts and could reuse. What else?
Should we e.g. include V8 logo as the primary image on any previews, or use first image from the post?
Since not every post has an image (see: https://v8.dev/blog/understanding-ecmascript-part-1 for an example), I'd go with a simple logo. I'm not sure if y'all use frontmatter for posts, but perhaps optionally allow authors to set an image with a URL and then fall back to the default logo if that frontmatter is not included 👍
Hmm on another hand, the Twitter guideline says:
You should not use a generic image such as your website logo, author photo, or other image that spans multiple pages.
Not sure if using a logo is better than nothing in this case.
In the case of logo or nothing, it theoretically should be over a bare URL. While they give that advice, it is the common practice.
For example, tweet this issue and you'll see the org's avatar or my avatar since there's no actual image for the page. Twitter even does it with any authors' page (example) on their blog:
One thing I will add: I would do a summary card for the logo by default, rather than the Summary With Large Image like Twitter does in the above.
Here's the docs for that: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary
An example of Node.js's use of this:
Yeah large image would definitely be messy in this case; it's something that really annoys me about Github when I'm posting issues in chats etc. and everyone sees a huge version of my avatar.
Summary card with a logo sounds reasonable assuming they won't ban us over violating the guidelines or something.
Would you want to make a PR?
I really like @tomayac's solution on his personal blog: screenshot each page with Puppeteer and use that as the summary card image.
I really like @tomayac's solution on his personal blog: screenshot each page with Puppeteer and use that as the summary card image.
- The script in question.
- The npm run script.
My biggest pain point is that the screenshotting is serial. I re-create them upon each deploy, which is not the smartest strategy, but also I couldn't be bothered to work on a smarter lazier option. Also I'm not sure to what extent Puppeteer is parallelizable.
I would be happy to submit a PR for the summary card if that's welcome - I'm not sure I could correctly implement the page screenshots, though that's a super cool idea and I fully support it if someone's willing to set it up! ❤️
I think summary card would be a good start for now. Please do, especially if it doesn't take much time! We can always upgrade to screenshots later.
For some inspiration see https://github.com/tomayac/blogccasion/blob/7119f3dcc460ab2aa03ea201f8815196951a59f5/_includes/layouts/base.njk#L83-L130 for the structured data and https://github.com/tomayac/blogccasion/blob/7119f3dcc460ab2aa03ea201f8815196951a59f5/.eleventy.js#L30-L33 for minification.
I don't think we need that many tags; let's start simple.
@tomayac Note that you can combine some of your tags into one, by doing e.g.:
<meta property="og:title" name="twitter:title" content="...">
Then again you don't even need this tag if you're fine with just using the <title>.
Yeah, I'm definitely erring on the over-serving structured data markup side. It was purely meant as an inspiration to cherrypick the things we want.
Yeah I'd start with description + image (V8 logo) + canonical URL. We can add more things later as necessary, but I think this would be enough for the start.
