Skip to content

Latest commit

 

History

History
51 lines (37 loc) · 2.54 KB

Social-Preview-Config.md

File metadata and controls

51 lines (37 loc) · 2.54 KB
Raw

Peripleo Social Preview Configuration

Social previews are info boxes that appear when you share a link on social media platforms like Facebook, Twitter, LinkedIn, etc.

Peripleo social preview example

You can control Peripleo's social preview through a set of <meta> tags in your index.html.

Twitter Metadata

Twitter previews rely on the proprietary Twitter Cards format. The key properties to fill are twitter:card, twitter:site, twitter:title, twitter:description and twitter:image. Simply adjust the presets in the index.html template to your needs.

Make sure that twitter:image points to the absolute URL of your preview image.

<!-- Twitter card metadata -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@britishlibrary" />
<meta name="twitter:title" content="Peripleo | Locating a National Collection" />
<meta name="twitter:description" content="A prototype viewer for geo-located collection data." />
<meta name="twitter:image" content="https://github.com/britishlibrary/peripleo-lanc/raw/main/public/peripleo-social-preview.png" />

OpenGraph Metadata

Most other social platforms (Facebook, LinkedIn, etc.) support the Open Graph vocabulary. The key properties to fill are og:type, og:title, og:description, og:image, og:image:width, og:image:height and og:url.

Make sure that og:image points to the absolute URL of your preview image; and that og:url points to the absolute base URL of your Peripleo instance.

```html
<!-- OG metadata -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Peripleo | Locating a National Collection" />
<meta property="og:description" content="A prototype viewer for geo-located collection data." />
<meta property="og:image" content="https://github.com/britishlibrary/peripleo-lanc/raw/main/public/peripleo-social-preview.png" />
<meta property="og:image:width" content="1000" />
<meta property="og:image:height" content="500" />
<meta property="og:url" content="https://britishlibrary.github.io/peripleo-lanc/" />

Preview Image

This template links to a generic Peripleo preview image. You can replace this with a custom image of your own choice. If you do, make sure the dimensions of your image are at least 1000x500 pixels.