Parcel: 馃檵 Support image meta tags

Created on 11 Dec 2017  路  9Comments  路  Source: parcel-bundler/parcel

Feature Request

馃 Expected Behavior

If I include a <meta name="og:image" content="./cover.jpg">, in an index.html, i'd expect that the source path gets properly updated after a successful build.

<meta name="og:image" content="./cover.jpg" />

would become

<meta name="og:image" content="./123414523412341234.jpg" />

馃槸 Current Behavior

meta tags with references to assets are not updated

馃實 Your Environment

| Software | Version(s)
| ---------------- | ----------
| Parcel | 1.1.0
| Node | 8
| npm/Yarn | 1.3
| Operating System | macOs

Feature

Most helpful comment

@mtskf I got stuck with this and created a plugin to manually set og:image as an absolute URL.

Not the cleanest solution, would be great if we could do this directly in parcel, but it works.

https://github.com/lukechilds/parcel-plugin-ogimage

All 9 comments

Any more meta tags you can think about that can contain assets?
It would help add full support for all meta names that can contain assets

<meta name="og:image" content="./123414523412341234.jpg" />
<meta name="twitter:image" content="./123414523412341234.jpg" />
<link rel="icon" type="image/png" sizes="16x16" href="/path/to/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/path/to/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/path/to/favicon-96x96.png">
<link rel="icon" sizes="192x192" href="/path/to/highres-icon.png">
<meta itemprop="image" content="http://example.com/image.jpg">
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
<link rel="mask-icon" href="/path/to/icon.svg" color="red">
<meta name="msapplication-TileImage" content="/path/to/tileimage.jpg">
<link rel="preload" href="image.png" as="image">

Source: https://github.com/joshbuchea/HEAD

Expanding the scope of this ticket slightly, it appears support is missing for <use> tags, which also produce a dependency. e.g.:

<svg class="icon -facebook" viewBox="0 0 32 32">
  <use xlink:href="./src/sprite.svg#facebook">
</svg>

Do you have any workaround before this feature is shipped?

@dmgawel I just copy directly into out dir after build.
https://github.com/Kjwon15/upbit-parody/blob/master/build.sh#L7

@gregkohn <use> tags support is resolved by #612.

~Throwing this here... nobody had an issue with twitter:image tag having to be a full URL instead of relative??~ nevermind, fixed it by cp the image that I needed so it doesn't have the hash.

This solution won't work - og:image content url must be full URL (relative path won't work).

@mtskf I got stuck with this and created a plugin to manually set og:image as an absolute URL.

Not the cleanest solution, would be great if we could do this directly in parcel, but it works.

https://github.com/lukechilds/parcel-plugin-ogimage

Was this page helpful?
0 / 5 - 0 ratings

Related issues

davidnagli picture davidnagli  路  3Comments

urbanhop picture urbanhop  路  3Comments

dsky1990 picture dsky1990  路  3Comments

Niggler picture Niggler  路  3Comments

algebraic-brain picture algebraic-brain  路  3Comments