-
Notifications
You must be signed in to change notification settings - Fork 27.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: add missing og:video
meta tag
#69644
Conversation
Allow CI Workflow Run
Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer |
@@ -521,6 +521,9 @@ export const metadata = { | |||
<meta property="og:image:width" content="1800" /> | |||
<meta property="og:image:height" content="1600" /> | |||
<meta property="og:image:alt" content="My custom alt" /> | |||
<meta property="og:video:url" content="https://nextjs.org/video.mp4"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lint is failing
<meta property="og:video:url" content="https://nextjs.org/video.mp4"> | |
<meta property="og:video:url" content="https://nextjs.org/video.mp4" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh... Thank you for check lint.
BTW, this code is html, not JSX.
That's why we might use plane html tag.
The real output is
<meta property="og:video:url" content="https://nextjs.org/video.mp4">
However, it's not big matter on this section.
Never mind.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yea we're linting them together now, will look for improvement on that later, thanks!
@@ -521,6 +521,9 @@ export const metadata = { | |||
<meta property="og:image:width" content="1800" /> | |||
<meta property="og:image:height" content="1600" /> | |||
<meta property="og:image:alt" content="My custom alt" /> | |||
<meta property="og:video:url" content="https://nextjs.org/video.mp4" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
og:video:url
is not a valid property; https://ogp.me/#structured
Unlike og:image
, which does have a :url
variant, video does not
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good catch, it should be og:video
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The same happens with audio, where it becomes og:audio:url
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice!
In addition, og:image
examples still use og:image:url
in docs.
We will update the below code and docs.
next.js/packages/next/src/lib/metadata/generate/meta.tsx
Lines 56 to 61 in 2a87b33
function getMetaKey(prefix: string, key: string) { | |
// Use `twitter:image` and `og:image` instead of `twitter:image:url` and `og:image:url` | |
// to be more compatible as it's a more common format | |
if ((prefix === 'og:image' || prefix === 'twitter:image') && key === 'url') { | |
return prefix | |
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
#69959, ahh already did :P
Summary
Add
og:video
meta tag to<head>
output.Description
Video example was added to the
openGraph
object inmetadata
at #66613.However this commit forgot output result.
Improving Documentation
pnpm prettier-fix
to fix formatting issues before opening the PR.x-ref: #66613