Next.js: Escaping problem with meta tags
Hi,
I'm facing an issue with meta tags. When I use some special characters like single quote in the head tag, it's escaping. I can not use dangerouslySetInnerHtml for meta tags.
in code:
<meta name="description" content="That's it!" />
result:
<meta name="description" content="That's it!" />
How can I handle with this? I couldn't find any solution about this problem.
Thanks.
Balamir
All 23 comments
@Balamir could you give us some code for this?
Where we can work on locally.
Please re-open this issue after that.
arunoda
on 19 May 2017
@arunoda thanks for the reply.
I just tried this with your head-elements example.
Simply I added above meta:
import Head from 'next/head'
export default () => (
<div>
<Head>
<title>This page has a title 馃</title>
<meta charSet='utf-8' />
<meta name="description" content="That's it!" />
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
</Head>
<h1>This page has a title 馃</h1>
</div>
)
and the result:
Thanks.
Balamir
on 19 May 2017
Thanks. I'll see what's happening here.
arunoda
on 19 May 2017
@arunoda I couldn't reopen this issue. It's still closed. Can you re-open this issue please?
Thanks.
Balamir
on 19 May 2017
This Issue still exist .For single quote it is rendering as '
clothing,men's shoes,men's accessories,women's clothing,women's shoes,jewelry,women's handbags,women's accessories,dogs,furniture,home and decor,kitchen and dining
Rupeshn73
on 14 Jul 2017
The same is true for urls.
Adding <meta property="og:image" content="http://example.com?foo=bar&bar=baz" /> results in <meta property="og:image" content="http://example.com?foo=bar&bar=baz" class="next-head"/>.
Notice the encoded &. Any way around that?
damusnet
on 4 Aug 2017
I'm facing the same issue. Are there any updates on it?
poohitan
on 5 Jan 2018
I'm expecting this is an upstream React SSR issue, since we don't escape values afaik.
timneutkens
on 8 Jan 2018
Running through the same issue. any workaround please ?
donaminos
on 9 Mar 2018
I've made a workaround by post-processing the generated HTML and using a regex for the attributes that are incorrectly encoded with HTML entities:
https://gist.github.com/stefl/1f8c246dd7ca9cb332ae41f68e80088d
Obviously not a long-term fix but it means that my Opengraph metadata is now not affected by this. Hope this is of use to others here!
stefl
on 19 May 2018
Please track https://github.com/facebook/react/issues/13838. I'm using the following workaround:
import Entities from 'html-entities/lib/html5-entities'
const entities = new Entities()
const escapeRegExp = /(content|href|src|srcSet)="([^"]+)"/g
const escapeHandle = (match, attribute, value) => {
return `${attribute}="${entities.decode(value)}"`
}
// ...
html = html.replace(escapeRegExp, escapeHandle)
oliviertassinari
on 12 Oct 2018
Still have the same issue...
mrasoahaingo
on 15 Jan 2019
@mrasoahaingo it's not really relevant to post "same issue", as @oliviertassinari said it's an upstream issue. If the issue is open you can consider it's still there an not solved, so saying "same issue" is not really useful, if you want to "+1" an issue use GitHub's reaction system on the initial post to 馃憤
Thanks.
timneutkens
on 15 Jan 2019
@timneutkens After 2 years it's normal to see people saying that the issue still there.
equinusocio
on 26 Jul 2019
The last comment before the "same issue" clearly said it's a bug in React, the issue on React's side is still open, hence why it's not valuable to say something along the lines of "Same issue...", it doesn't add value, this is why the emoji reactions exist in GitHub.
timneutkens
on 26 Jul 2019
React Helmet has a encodeSpecialCharacters boolean prop to disable the encode server side. Can it be done on next-head too?
equinusocio
on 27 Jul 2019
Seems like Helmet completely bypasses React, which doesn't seem like a good idea imo.
timneutkens
on 27 Jul 2019
Closing this as it's tracked on React: https://github.com/facebook/react/issues/13838
timneutkens
on 2 Jan 2020
We are migration the application to next.js we have been using helmet and I tried to migrated to next/head but I found the error with for example the http://schema.org data for example to use
<script type="application/ld+json">
{"@context":"http://schema.org","@type":"BreadcrumbList" ...
</script>
next/head convert it to, but with react-helmet return the expect value
<script type="application/ld+json">
"@context": "http://schema.org",
"@type": "SportsEvent",
</script>
vxcamiloxv
on 22 Aug 2020
@vxcamiloxv Have you tried with making it a string?
Like:
<script type="application/ld+json">{`
{"@context":"http://schema.org","@type":"BreadcrumbList" ...
`}</script>
Can't remember, but think I made that work once :)
DesignMonkey
on 23 Aug 2020
@DesignMonkey yes, my final solution was <script ype="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(json) }} />
vxcamiloxv
on 24 Aug 2020
@vxcamiloxv Oh yea sure... Maybe that was the solution I ended up with as well :)
DesignMonkey
on 24 Aug 2020
@vxcamiloxv Thank you for sharing your solution!
I have used it to get the proper behaviour:
const ldJSON = `<JSON goes here>`
....
and then
in return (<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: ldJSON }}/>)
dzinemon
on 30 Oct 2020
Related issues
flybayer
路
3Comments
olifante
路
3Comments
kenji4569
路
3Comments
YarivGilad
路
3Comments
jesselee34
路
3Comments
Most helpful comment
I'm facing the same issue. Are there any updates on it?