How to add an image when you share your site on Discord

Reading time: 1 minute(s)

The image that pops up when you share a link on Discord is referred to ‘Open Graph’. Because of the nature of static websites, you would need to add some code to your <head></head> tag on every page that you want this to appear on. For this reason, many people only use this on their homepage, or on special pages.

Here are instructions on how to set it up:

  • Add the following code between your <head></head> tags:

  <meta property="og:url" content="https://yourwebsite.neocities.org/" />
  <meta property="og:type" content="article" />
  <meta property="og:title" content="Your Website Title" />
  <meta property="og:description" content="A description of your website." />
  <meta property="og:image" content="https://yourwebsite.neocities.org/screenshot.png" />
  <meta property="twitter:card" content="summary_large_image">

  • Replace the og:url property with your website’s URL.
  • Replace the og:title property with the title of your website.
  • Replace the og:description property with a description of your website.
  • Replace the og:image property with a screenshot of your website.
  • Save the file.
  • Test it out by sending your URL to someone in Discord.

When testing on Discord:

  • Discord caches Open Graphs, but there’s an easy way to check how it looks: type in your URL and after the last letter, add a ? and some random numbers. Like this:
https://sadgrl.online/?95343

This link will still go to your website, but since the URL looks different, it forces Discord to regenerate the preview.

Leave a Comment