lukechilds / parcel-plugin-ogimage

Set absolute URL for og:image meta tags.

parcel-plugin-ogimage

Set absolute URL for og:image meta tags.

Sets absolute URLs for og:image meta tags. This is required by the spec and relative URLs will not work on some sites such as Twitter.

You can fix this directly in parcel by using --public-url https://example.com, however now all your URLs are hardcoded to absolute URLs which may be undesirable and can break things like prerendering.

This plugin uses the value of the og:url meta tag to convert og:image to an absolute URL.

Install

npm install parcel-plugin-ogimage

Usage

Just install this package as a development dependency. Parcel will automatically call it when building your application.

You must have both og:image and og:url meta tags:

<meta property="og:image" content="card.png">
<meta property="og:url" content="https://example.com">

Parcel will generate that into something like this:

<meta property="og:image" content="/card.9190ce93.png">
<meta property="og:url" content="https://example.com">

parcel-plugin-ogimage will then update the og:image with an absolute URL:

<meta property="og:image" content="https://example.com/card.9190ce93.png">
<meta property="og:url" content="https://example.com">

License

MIT © Luke Childs

parcel-plugin-ogimage's Issues

Wrong path

I have following meta tags:

<!-- INPUT -->
<meta property="og:image" content="./img/og_img.png">
<meta property="og:url" content="https://mywebsite.io/someurl">

My --public-path in parcel is also just ./ which means the image should come from /someurl, instead, /someurl will get removed so the output looks like following:

<!-- OUTPUT  -->
<meta property="og:image" content="https://mywebsite.io/og_img.123.png">
<meta property="og:url" content="https://mywebsite.io/someurl">

---

<!-- EXPECTED OUTPUT  -->
<meta property="og:image" content="https://mywebsite.io/someurl/og_img.123.png">
<meta property="og:url" content="https://mywebsite.io/someurl">

Not compatible with parcel-plugin-inliner

parcel-plugin-inliner uses --public-url for local files resolving but parcel-plugin-inliner uses this option for URL transforming. So I cannot use both plugins.

shff/parcel-plugin-inliner#13

Only works for the main index.html file

UnhandledPromiseRejectionWarning: TypeError: Cannot read property '0' of null

When I try to transform the following tags:

<meta property="og:title" content="V!RTL" />
<meta property="og:image" content="assets/logo.svg" />
<meta property="og:locale" content="en_US" />
<meta property="og:site_name" content="v1rtl.site" />

I get this error:

UnhandledPromiseRejectionWarning: TypeError: Cannot read property '0' of null
    at getMetaTag (/home/v1rtl/Desktop/Coding/v1rtl.site/node_modules/parcel-plugin-ogimage/index.js:11:25)
    at Bundler.<anonymous> (/home/v1rtl/Desktop/Coding/v1rtl.site/node_modules/parcel-plugin-ogimage/index.js:35:20)
    at Bundler.emit (events.js:203:13)
    at Bundler.bundle (/home/v1rtl/Desktop/Coding/v1rtl.site/node_modules/parcel-bundler/src/Bundler.js:361:12)
    at processTicksAndRejections (internal/process/task_queues.js:85:5)
(node:15421) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:15421) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Assets content:

➜ tree assets -L 1
assets
├── animation
├── art_bg.webp
├── background.webp
├── blog.webp
├── desktop.webp
├── icons
├── logo.svg
├── marker.webp
├── robots.webp
└── web_bg.webp