Skip to content

Instantly share code, notes, and snippets.

@stefl
Created May 19, 2018 15:35
Show Gist options
  • Save stefl/1f8c246dd7ca9cb332ae41f68e80088d to your computer and use it in GitHub Desktop.
Save stefl/1f8c246dd7ca9cb332ae41f68e80088d to your computer and use it in GitHub Desktop.
Fix for Next.js / React SSR meta tags have URL-encoded content
// React SSR renders out <meta tags with URL-encoded values.
// That's bad if you need query parameters in your URLs.
// Before: <meta property="og:image"
// content="https://makelight-prismic-images.imgix.net/7f97d951970bbb15a8b3744e4c69499ffe969d66_img_1010.jpg?w=1200&amp;h=630&amp;fit=crop&amp;crop=entropy&amp;auto=format&amp;ixlib=js-1.1.1" class="next-head"/>
// (Notice the &amp;s in the URL)
//
// After: <meta property="og:image"
// content="https://makelight-prismic-images.imgix.net/cfb3a074bfcab5793eded64ef077dd6260d6d89b_img_0578.jpg?w=1200&h=630&fit=crop&crop=entropy&auto=format&ixlib=js-1.1.1" class="next-head"/>
// (Notice &amp; is now correctly &
//
// Use a custom Express server and add this middleware at the top of the middleware stack
const interceptor = require('express-interceptor');
const Entities = require('html-entities').AllHtmlEntities;
const entities = new Entities()
const metaContentFixer = interceptor(function(req, res){
//console.log(res)
return {
isInterceptable: function (rq, rs) {
// Only alter HTML
//console.log('is interceptable',res.get('Content-Type'))
return /text\/html/.test(res.get('Content-Type'));
},
intercept: function (body, send) {
// Regex matches anything with a content="" attribute. Adjust this for your own needs.
send(body.toString().replace(/content="([^"]+)"/g, function(match, content) {
console.log('replace', content)
return `content="${entities.decode(content)}"`
}))
}
}
})
const server = express()
server.use(metaContentFixer)
... the rest of your Express setup.
@jyxjjj
Copy link

jyxjjj commented Jun 18, 2024

Is there anyway to fix for static output?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment