This article explains where the preview of a page shared on a social network comes from and how to set it. You will learn to change its title, description and image, or to have a share card drawn in your colors.
Before you start
- A link to your site pasted into Facebook, LinkedIn, WhatsApp, Slack or X shows as a preview, with a title, a description and an image. Your site writes this information into every published page.
- With no setting, the preview uses the SEO title, the meta description and an image of the page. You only set what you want to be different for social networks.
- The settings are saved with the content and go online at the next publication of the site.
Understand the default preview
| Element | Source, in order |
|---|---|
| Title | The OG Title, otherwise the page’s SEO title. |
| Description | The OG Description, otherwise the meta description. |
| Image | The share card or the image chosen in Share image, otherwise the content’s featured image, otherwise the first image of the page, otherwise the site logo. |
Apart from the sharing image, an SVG or AVIF image is skipped, because social networks do not display it. The first image of the page counts if it is at least 600 pixels wide and not too tall or too stretched. The logo counts if it is a JPEG, PNG or WebP. Failing that, the site uses its home screen icon.
A page that has an image appears with a large image. Without an image, the network shows a smaller preview.
Open the Social networks panel
- Open the content in the editor.
- In the right column, click the tab named after the type, then the SEO tab.
- Expand the Social networks panel. It starts with the Social preview.
| Setting | Effect | Left empty |
|---|---|---|
| OG Title | The title of the preview on social networks. | The SEO title. |
| OG Description | The text of the preview on social networks. | The meta description. |
| Share image | The image of the preview: an image from your media library or a share card. | The featured image, the first image of the page, then the logo. |
Choose a sharing image
- Under Share image, click Choose an image. The media library opens.
- Choose a JPEG, PNG or WebP image, then confirm. It appears under Share image and in the preview.
Change image picks another one. Remove image goes back to the default image.
Generate a share card
A share card is a 1,200 by 630 pixel image that the site draws with your title, your colors and your logo. It is used when the page has no suitable visual.
- Under Share image, click Generate a social card. The Social card window opens, with the settings on the left and the Social preview on the right.
- Set the card. The preview follows every change.
- Click Use this card. The window closes.
Under Share image, the buttons become Edit social card and Remove card. A content item carries an image or a card, never both.
| Setting | Effect | Default value |
|---|---|---|
| Title | The main text of the card, on four lines at most. | The content item’s title. |
| Second line | A smaller line under the title: Site name, Author or Custom, with its Second line text. | None. |
| Background | The background color. | The first color of your design system. |
| Background image | An image placed on the background, chosen from the media library. | None. |
| Text color | The color of the title and the second line. | The most readable color on the background. |
| Card font | The font of the text, among those of your site. | Default theme font. |
| Font size | The size of the title, taken from your size scale. | Auto: the title shrinks to fit. |
| Text alignment | Left, center or right. | Left. |
| Text position | Top, Center or Bottom. | Center. |
| Logo | The place of your logo in a corner, or No logo. | Bottom left. |
Four settings only appear with a background image.
| Setting | Effect | Default value |
|---|---|---|
| Overlay | A color placed over the image so the text can be read. | Black at 50%. |
| Image padding | A space around the image, taken from your spacing scale. | None. |
| Image radius | The rounding of the image corners, taken from your radius scale. | None. |
| Image shadow | A drop shadow, taken from your shadow library. | None. |
A card with an empty title is not drawn: the preview then uses the default image.
Check the preview on a network
The network reads your live page. Publish the site before testing a share. A network keeps the preview of an address that was already shared in memory: a change can take time to show up.