# Frontend canister does not show url preview thumbnail?

**URL:** <https://forum.dfinity.org/t/frontend-canister-does-not-show-url-preview-thumbnail/55681>\
**Category:** Developers\
**Created:** [August 16, 2025, 2:50pm UTC](https://forum.dfinity.org/t/frontend-canister-does-not-show-url-preview-thumbnail/55681 "2025-08-16T14:50:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![AliSci](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/alisci/32/33799_2.png) [@AliSci](https://forum.dfinity.org/u/AliSci)\
**Post date:** [August 16, 2025, 2:50pm UTC](https://forum.dfinity.org/t/frontend-canister-does-not-show-url-preview-thumbnail/55681/1 "2025-08-16T14:50:36Z")

</div>

````auto
### Issue

If you try to use my GitHub page:

- ✅ Works fine → https://aliscie2.github.io/oDoc/ (thumbnail shows)  
- ❌ On mainnet → https://icpjobs.com/ (thumbnail not showing)

---

### `index.ts`

```tsx
<Helmet>
  {["twitter:image", "og:image"].map((property: string) => {
    const basePath =
      import.meta.env.VITE_DFX_NETWORK === "staging" ? "/oDoc/" : "/";
    const imageName = window.location.hostname.includes("icpjobs")
      ? "icpjobs_thumnail.png"
      : "odoc_thumnail.png";

    return (
      <meta
        key={property}
        property={property}
        content={`${basePath}${imageName}`}
      />
    );
  })}
</Helmet>

````

* * *

### `index.html`

```auto
<meta key="og:image" property="og:image" content="/public/icpjobs_thumnail.png" />

<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="ODOC" />

<!-- Twitter -->
<meta key="twitter:image" property="og:image" content="/public/icpjobs_thumnail.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://icpjobs.com" />
<meta name="twitter:title" content="ICPJOBS | AI job match | Crypto Agreements" />

```

* * *

### Repo

GitHub: [oDoc](https://github.com/aliscie2/oDoc)

* * *

### Already Tried

- Changed from:

- To:

- ❌ Still not working on mainnet.

```auto

```

 ![Screenshot 2025-08-16 at 5.45.53 PM](https://us1.discourse-cdn.com/flex023/uploads/dfn/original/3X/9/9/99b30acddadc2c0ad815ac5b1a6a42db7167fdb4.jpeg)

---

<div class="post-metadata">

**Author:** ![jdelforge](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/jdelforge/32/34821_2.png) [@jdelforge](https://forum.dfinity.org/u/jdelforge)\
**Post date:** [August 17, 2025, 12:24am UTC](https://forum.dfinity.org/t/frontend-canister-does-not-show-url-preview-thumbnail/55681/2 "2025-08-17T00:24:05Z")

</div>

Why not write an absolute url for the image?

---

<div class="post-metadata">

**Author:** ![AliSci](https://sea1.discourse-cdn.com/flex023/user_avatar/forum.dfinity.org/alisci/32/33799_2.png) [@AliSci](https://forum.dfinity.org/u/AliSci)\
**Post date:** [August 17, 2025, 5:11am UTC](https://forum.dfinity.org/t/frontend-canister-does-not-show-url-preview-thumbnail/55681/3 "2025-08-17T05:11:06Z")

</div>

u mean like `https://raw.githubusercontent.com/aliscie2/oDoc/refs/heads/dev2/public/icpjobs_thumnail.png` ? but why an’t we just solve it somehone?

---

<div class="post-metadata">

**Author:** ![peterparker](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@peterparker](https://forum.dfinity.org/u/peterparker)\
**Post date:** [August 17, 2025, 2:36pm UTC](https://forum.dfinity.org/t/frontend-canister-does-not-show-url-preview-thumbnail/55681/5 "2025-08-17T14:36:37Z")

</div>

+1 for absolute url

> <https://stackoverflow.com/questions/9858577/open-graph-can-resolve-relative-url/9858694#9858694>