# How to create webpage previews for links?

**URL:** <https://forums.realmacsoftware.com/t/how-to-create-webpage-previews-for-links/47749>\
**Category:** Elements\
**Created:** [May 25, 2025, 12:52pm UTC](https://forums.realmacsoftware.com/t/how-to-create-webpage-previews-for-links/47749 "2025-05-25T12:52:49Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![numericcitizen](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/numericcitizen/32/26930_2.png) [@numericcitizen](https://forums.realmacsoftware.com/u/numericcitizen)\
**Post date:** [May 25, 2025, 12:52pm UTC](https://forums.realmacsoftware.com/t/how-to-create-webpage-previews-for-links/47749/1 "2025-05-25T12:52:49Z")

</div>

For those who know about [Ghost.org](http://Ghost.org), when pasting a link inside a blog post editor, you get a nice preview like this one. How can we emulate this inside Elements page editor, quickly?

 ![Cleanshot - Ghost Admin@2025-05-25@08.51.54@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/0/e/0e2460aec6abbd8c4c237752874bd2359cb5e082.png)

---

<div class="post-metadata">

**Author:** ![numericcitizen](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/numericcitizen/32/26930_2.png) [@numericcitizen](https://forums.realmacsoftware.com/u/numericcitizen)\
**Post date:** [May 25, 2025, 12:53pm UTC](https://forums.realmacsoftware.com/t/how-to-create-webpage-previews-for-links/47749/2 "2025-05-25T12:53:44Z")

</div>

This link preview gets automatically generated with the Ghost blog post editor… it’s rather nice.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [May 25, 2025, 6:07pm UTC](https://forums.realmacsoftware.com/t/how-to-create-webpage-previews-for-links/47749/3 "2025-05-25T18:07:52Z")

</div>

You could certainly build this style of layout in [Elements](https://elementsapp.io/) (and even make it into a Global), but that’s rather manual, and I’m guessing you wanted this to happen automatically…

Getting open graph data and rendering it on a webpage is usually done server-side, so not something [Elements](https://elementsapp.io/) currently supports. However, this would probably be possible for someone to build and offer as a Component 🤔

I wonder if anyone else has any other thoughts on how this could be achieved…

---

<div class="post-metadata">

**Author:** ![numericcitizen](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/numericcitizen/32/26930_2.png) [@numericcitizen](https://forums.realmacsoftware.com/u/numericcitizen)\
**Post date:** [May 25, 2025, 8:16pm UTC](https://forums.realmacsoftware.com/t/how-to-create-webpage-previews-for-links/47749/4 "2025-05-25T20:16:48Z")

</div>

Certainly too manual… this brings me another question: are [Elements](https://elementsapp.io/) website, static or dynamic? I’m thinking of Hugo which supports creating static sites where nothing is executed while browsing the site… to my knowledge, at lease.

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [May 26, 2025, 6:43am UTC](https://forums.realmacsoftware.com/t/how-to-create-webpage-previews-for-links/47749/5 "2025-05-26T06:43:21Z")

</div>

> [@numericcitizen](#):
>
> are [Elements](https://elementsapp.io/) website, static or dynamic?

By default, **pages in [Elements](https://elementsapp.io/) are static** — the app generates and exports all pages at publish time.

However, your site can become **somewhat dynamic** through the use of **PHP**. Some built-in components already use PHP to dynamically fetch and render data on the server.

Additionally, component developers can create **JavaScript-powered components** that fetch and render data **client-side** — for example, pulling content from an API or external source after the page loads.

So while **[Elements](https://elementsapp.io/) itself generates a static site** , components can introduce **varying levels of dynamic behavior** , depending on what’s needed.

---

<div class="post-metadata">

**Author:** ![numericcitizen](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/numericcitizen/32/26930_2.png) [@numericcitizen](https://forums.realmacsoftware.com/u/numericcitizen)\
**Post date:** [May 26, 2025, 10:31am UTC](https://forums.realmacsoftware.com/t/how-to-create-webpage-previews-for-links/47749/6 "2025-05-26T10:31:06Z")

</div>

By introducing dynamic behaviours via components, does this possibly increase or change the server requirements? I’m currently using Cloudflare Pages connected to a Github repo…

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [May 26, 2025, 11:48am UTC](https://forums.realmacsoftware.com/t/how-to-create-webpage-previews-for-links/47749/7 "2025-05-26T11:48:34Z")

</div>

If the component uses PHP, then yes — your server will need to support PHP.
