DEV Community

Cover image for How to add a preview of your React (or any other) site when sharing it
Erik Karlsson
Erik Karlsson

Posted on

How to add a preview of your React (or any other) site when sharing it

Are you struggling with having your website preview looking something like this:
No picture in preview
Whenever you're sharing it on linkedin/facebook/etc, when you're really looking for something like this:
Man in picture

I had this exact same issue and solved it. Let me show you how.

The magic is all in the index.html file. Sites such as Linkedin and facebook, and even Discord, use something called the Open Graph Protocol, and this allows you to specify how you want your preview to look like.

This you will specify in the <head> tag where you have your usual <meta> tags such as <meta charset="utf-8" /> etc.

The syntax is:



<meta property="og:title" content="Title-name">
<meta property="og:image" content="File-path">
<meta property="og:url" content="Canonical-url">
<meta property="og:type" content="website">


Enter fullscreen mode Exit fullscreen mode

These four tags are required. There's also optional tags, the most commonly used being og:description. You can read more about all the types of tags here.

The image can be anything you want - from very abstract to an actual preview of your site. I made mine by squeezing up my site and finding the right place to screen dump, then I put it in the assets folder, and I declared it by: ```property="og:image"

content="https://erikkarlsson.dev/assets/prev.png"


Together with everything else in the header it looked like this:
```HTML


<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

<meta property="og:type" content="website">
<meta property="og:title" content="Erik Karlsson">
<meta property="og:description" content="Portfolio page made by Erik in React.">
<meta property="og:image" content="https://erikkarlsson.dev/assets/prev.png">
<meta property="og:url" content="https://erikkarlsson.dev">

...


Enter fullscreen mode Exit fullscreen mode

Which looks like this when sharing it on Linkedin:

After

And that's how you do it! Check out this if you want to learn more about this topic.

Top comments (4)

Collapse
 
erikkarlsson profile image
Erik Karlsson

Important: If you add this, and it doesn't work immediately, don't fret. Sites only scrap once every 24h. But you can speed it up by going to here for fb: developers.facebook.com/tools/debug and press "scrape again", or here for linkedIn: linkedin.com/post-inspector/

Collapse
 
gebna profile image
gebna

This saved my day. Thanks Erik!

Collapse
 
blossom profile image
Blossom Babs

How do we test this locally?

Collapse
 
komal1502 profile image
Komal Parulekar

how to make this preview dynamic ?