React>> gatsby-meta-encoded-url-workaround>> 返回
项目作者： notsidney

项目描述 ：
Fix meta tags having encoded URLs in the content property on Gatsby
高级语言： HTML
项目地址: git://github.com/notsidney/gatsby-meta-encoded-url-workaround.git


Gatsby Meta Encoded URL Workaround

React has a bug that encodes
special characters, such as & → &, in the meta tag.

This becomes problematic for Open Graph meta images with URLs that have query
strings.

The Prismic imgix server does not recognise the query string on the following
URL:

  1. https://images.prismic.io/antlerco/44b963ba-2aee-4ecc-8d9d-3f377160e29a_Team+Off+Script+-+STO+-+high+res.jpg?auto=compress,format&rect=0,0,2000,1333&w=1200&h=800

The query string specifies that the server should resize the image to be 1200px
wide. It appears that LinkedIn rejects images that are too large, returning
“No image found” on the Post Inspector.

When LinkedIn does receive a 1200px wide image, it
displays correctly on the Post Inspector
and on the LinkedIn feed.

The workaround

This works around the issue in Gatsby using a
custom html.js:

  1. Render the React components to static markup using ReactDOMServer.
  2. Replace encoded characters in the static markup, such as & → &.
  3. Render the static markup using dangerouslySetInnerHTML.

Code example →

HTML output →