# Set up social sharing

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

1. Open the content in the editor.
2. In the right column, click the tab named after the type, then the **SEO** tab.
3. Expand the **Social networks** panel. It starts with the **Social preview**.

![The Social networks panel of the SEO tab: the share preview of the Home page, the empty OG title and OG description fields with their default value, then the sharing image and its two buttons, Choose an image and Generate a share card.](https://static.lovelyrender.com/uploads/2026/10/1017-doc-trouve-reseaux.png)

| 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. |

**Tip:** For a campaign, write an **OG Title** catchier than the page title. The page keeps its title in Google and social networks show your hook.

## Choose a sharing image

1. Under **Share image**, click **Choose an image**. The media library opens.
2. 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.

1. 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.
2. Set the card. The preview follows every change.
3. 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. |

**Note:** An inner shadow is not drawn on the card. A shadow made only of inner layers leaves the image without a shadow.

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.

## See also

- [Set a page’s SEO](https://lovelyrender.com/documentation/set-page-seo/)
- [Add your logo and icon](https://lovelyrender.com/documentation/add-logo-icon/)
- [Publish your site](https://lovelyrender.com/documentation/publish-site/)