My meta tags get HTML encoded, how do I prevent?

[magnusdr]

I'm trying to implement Open Graph meta tags for a route, but my og:image tag gets HTML encoded, replacing all & with &.

Small example to reproduce:

export const meta: V2_MetaFunction = (args) => {
  return [
    {
      property: 'og:image',
      content: '&',
    },
  ];
};

Results in this, debugging in browser

<meta property="og:image" content="&amp;"/>

How do i prevent this?

[sergiodxa]

I think this could be React escaping characters for safety

[kayluhb]

Yes, React is escaping the characters, which is currently preventing our og:image:url/secure_url tags from properly getting resized by our CDN

2c5ab40886604a437de403a892a7f33aceb12e31-2000x2500.png?auto=format&fit=max&w=1080 vs 2c5ab40886604a437de403a892a7f33aceb12e31-2000x2500.png?auto=format&fit=max&w=1080

This seems to be a fairly common issue; Shopify's CDN for instance doesn't support the escaped &.

Would it make sense to dangerouslySetInnerHtml on a Fragment for og:image:url and og:image:secure_url meta fields in the Meta component of @remix-run/react?

I'd be happy to make a PR if it makes sense.

[GabenGar]

Does running the URL through encodeURIComponent() help?

[kayluhb]

I looked into that, but it didn't really help.

url = 'https://cdn.shopify.com/s/files/1/0077/0432/files/Desktop_EOS_20_282_29.jpg?v=1724367178&width=200&crop=center'

encodeURIComponent(url)

'https%3A%2F%2Fcdn.shopify.com%2Fs%2Ffiles%2F1%2F0077%2F0432%2Ffiles%2FDesktop_EOS_20_282_29.jpg%3Fv%3D1724367178%26width%3D200%26crop%3Dcenter'

That's an invalid URL.

I tried to just use it on the search params as well and that doesn't work either.

const search = 'v=1724367178&width=200&crop=center'
const params = encodeURIComponent(search)
const url = `https://cdn.shopify.com/s/files/1/0077/0432/files/Desktop_EOS_20_282_29.jpg?${params}`

'https://cdn.shopify.com/s/files/1/0077/0432/files/Desktop_EOS_20_282_29.jpg?v%3D1724367178%26width%3D200%26crop%3Dcenter'