next-seo
next-seo copied to clipboard
garmeeh
OG Image url encoding results in wrong url
Describe the bug
A clear and concise description of what the bug is.
I am using the vercel og-image service to serve og images for my app. The url generates dynamic og images using the supplied query parameters which are supplied using the & symbol in url. But next-seo encodes the url resulting in & which breaks the url and does not give expected result
Reproduction For issues to be triaged in a timely manner please provide a Codesandbox/Github of the issue in it's simplest reproduction.
Original Image URL: https://og-image.vercel.app/Hello%20World.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fvercel-triangle-black.svg
Encoded Image URL generated by next-seo : https://og-image.vercel.app/Hello%20World.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fvercel-triangle-black.svg
Expected behavior A clear and concise description of what you expected to happen. Is there a option so we can skip encoding the url, or any other workaround for it.
Additional context Add any other context about the problem here.
Yeah I just ran into this where I have an & in an Article title as well as the URL for images and it is resulting in the &
@garmeeh I know you had mentioned that this might be an issue with react. However, I am able to do
<Head>
<script
id="app-ld-json"
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify(content),
}}
/>
</Head>
where content has URLs like https://cdn.sanity.io/images/8pbt9f8w/production/4970237430aef6b6d4fe9d165d32d46ef2492bb7-1408x792.jpg?fit=min&auto=format and doing dangerouslySetInnerHTML doesn't turn that & into an &. The issue isn't React but the fact that toJson is escaping those characters: https://github.com/garmeeh/next-seo/blob/master/src/utils/toJson.tsx#L32
Did anyone find a workaround for this? Encoding the URL before providing it to next-seo solves the issue, but I'm not sure if you can have encoded url's in an og:image tag.
@JamesSingleton ah! Which was? Just not using the og solution of next-seo?
@ianwensink yup! So I just ended up doing
<Head>
<script
id="app-ld-json"
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify(content),
}}
/>
</Head>
And passed my own content to JSON.stringify()... I mean if you are sanitizing/escaping stuff then it isn't so dangerous 😅 plus next-seo doesn't have/allow everything that is supported by ld+json so I ended up rolling my own so I can get the full benefit of ld+json. In my example, the content passed to JSON.stringify() looks like the following
const content = {
'@context': 'http://schema.org',
'@graph': [
Organization,
WebSite,
{
'@type': 'WebPage',
'@id': `${SITE_URL}/#webpage`,
url: SITE_URL,
name: 'Redshirt Sports',
isPartOf: {
'@id': `${SITE_URL}/#website`,
},
about: {
'@id': `${SITE_URL}/#organization`,
},
dateModified: mainArticle._updatedAt,
description:
'Redshirt Sports brings you the College Football Championship Subdivision (FCS) news, standings, rumors, and more.',
breadcrumb: {
'@id': `${SITE_URL}/#breadcrumb`,
},
inLanguage: 'en-US',
potentialAction: [
{
'@type': 'ReadAction',
target: [SITE_URL],
},
],
},
{
'@type': 'BreadcrumbList',
'@id': `${SITE_URL}/#breadcrumb`,
name: 'Home Breadcrumbs',
itemListElement: [
{
'@type': 'ListItem',
position: 1,
name: 'Home',
item: SITE_URL,
},
],
},
],
}
Hi, do you have any plan to fix the issue? looks like setting URLs in tags with '&' does not work.
@iners-max @rhythmbhiwani
I managed to do something like this and it works on next-seo:
const url = process.env.NODE_ENV === "production"
? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
: "http://localhost:3000";
const og = new URL(`${url}/api/og/?title=${title}${
metaDesc ? `&description=${metaDesc}` : ""
}`)
Then in openGraph Settings:
openGraph={{
url: canonical ?? ``,
title: opengraphTitle ?? ``,
description: metaDesc ?? ``,
siteName: opengraphSiteName ?? ``,
images: [
{
url: og.href,
width: 1200,
height: 627,
alt: metaDesc ? metaDesc : ``,
},
],
}}
