feat: generate Open Graph images and add og: and twitter: metadata
#289
Conversation
This file contains 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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
julien-deramond
force-pushed
the
main-jd-opengraph-images
branch
from
09bd490
to
d9a53d2
Compare
julien-deramond
force-pushed
the
main-jd-opengraph-images
branch
from
d9a53d2
to
6125877
Compare
julien-deramond
changed the title
og: and twitter: metadata
|
Here are the tests done after having merged this PR.
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
This PR supersedes #80
This PR creates Open Graph images based on https://github.com/delucis/astro-og-canvas and Astro's doc implementation.
The idea is to generate images for each Markdown pages in
src/contentand to use them as Open Graph images. As an example,src/content/articles/can-i-take-this-issue.mdxwill have an image generated atpublic/open-graph/articles/can-i-take-this-issue.png, and so within https://main-branch-openresource-dev-git-main-jd-o-3c43e0-open-resource.vercel.app/articles/can-i-take-this-issue, you'll find<meta property="og:image" content="https://openresource.dev/open-graph/articles/can-i-take-this-issue.png">(that can be tested via https://main-branch-openresource-dev-git-main-jd-o-3c43e0-open-resource.vercel.app/open-graph/articles/can-i-take-this-issue.png).While we are at it, we handle all
og:*andtwitter:*meta tags based on frontmatter data of each page of the website.However, this technique only works for
src/contentwritten in Markdown. Other pages directly as Astro pages can't have generated content like this one as is.For now, I've created a template in Figma to generate static images for the other pages. I'll create a task after this PR to automatize its generation.
(Note: this PR has needed two more commits afterward to fix some tiny issues: 3a6e082 and e313a5f)
After this PR
og:andtwitter:metadata #289 (comment)Motivation & Context
This change is the first part required to have images displayed when Open {re}Source links are shared on other platforms.
Type of changes
Checklist