Created
May 19, 2018 15:35
-
-
Save stefl/1f8c246dd7ca9cb332ae41f68e80088d to your computer and use it in GitHub Desktop.
Fix for Next.js / React SSR meta tags have URL-encoded content
This file contains hidden or 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
// 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&h=630&fit=crop&crop=entropy&auto=format&ixlib=js-1.1.1" class="next-head"/> | |
// (Notice the &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 & 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. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Is there anyway to fix for static output?