---
title: "Edit a page to improve links for social media"
slug: "edit-a-page-to-improve-links-for-social-media"
abstract: "Add social meta tags to your website or blog to improve how your content is displayed on social networks."
---
# Edit a page to improve links for social media

When social media is the major driver of your website's traffic, it is a good idea to add Open Graph or Twitter Card tags to the pages with social media content. Adding these meta tags to your website does not directly affect your on-page SEO, but it improves the performance of your links in social media.

<details>
<summary><h2>Add an Open Graph tag</h2></summary>

Facebook introduced [Open Graph](https://developers.facebook.com/docs/sharing/opengraph/object-properties) to promote integration between Facebook and other websites. Open Graph is now used by most social media and it allows you to control the way information travels from a third-party website to a social media site when a page is shared. In order to make this possible, information is sent using Open Graph meta tags in the <head> part of the website’s code.

To edit page settings related to social networks:

1. In the Experience Editor, go to the page you want to improve.
2. On the ribbon, on the **Experience Accelerator** tab, click **Social**.
3. In the dialog box, in the **Open Graph** section, edit the following fields that the social network uses when the content/page is shared:

    | **Field** | **Description** | **OpenGraph tag** |
    | --- | --- | --- |
    | Title | The title for the content/page. | `og:title` |
    | Description | A description for the content/page. | `og:description` |
    | Image | The URL for the image that you want to show. | `og:image` |
    | Type | A description of the content type, for example: video, article, or website. | `og:type` |
    | Site name | The name of the site that is shared. | `og:site_name` |
    | Admins | The user ID, or list of user IDs for Facebook if your page is a Facebook app. | `og:admins` |

For example, the following tags render the following HTML:

- **Tag settings in OpenGraph section**: **Rendered output added to head tag in HTML**
- ![87AA692143DE495396CEB2FCBBF2E743.png](https://doc.sitecore.com/api/markdown-image/xp/en/users/sxa/105/sitecore-experience-accelerator/images/87AA692143DE495396CEB2FCBBF2E743.png):

```xml
<meta content="SXA" property="og:title">
<meta content="Sitecore Experience Accelerator" property="og:description">
<meta content="http://sxa/-/media/Default-Website/cover.jpg" property="og:image">
<meta content="article" property="og:type">

```

</details>

<details>
<summary><h2>Add a Twitter card tag</h2></summary>

When someone tweets a link to content on your website, [twitter cards](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started) enable you to attach other content to the tweet. This makes the tweet more engaging.

To add a Twitter card tag:

1. In the Experience Editor, go to the page you want to improve.
2. On the ribbon, on the **Experience Accelerator** tab, click **Social**.
3. To determine what the twitter card actually shows, in the dialog box, in the **Twitter** section, edit the following fields:

    | **Field** | **Description** | **Twitter tag** |
    | --- | --- | --- |
    | Tweet Text | Title of the page or article. | `twitter:title` |
    | Tweet site | The Twitter username of your site. | `twitter:site` |
    | Tweet description | Description of the page or article. | `twitter:description` |
    | Tweet image | URL of image to use in the card. | `twitter`:`image` |
    | Card type | Determines the type of card to use. The options are:<br><br>**Summary Card** – shows a small image with summary text.<br><br>**Summary Card with Large Image** – shows a large image with summary text.<br><br>**App Card** – links to the app install in an app store. | `twitter`:`card` |

For example, the following tags render the following HTML:

- **Tag settings in Twitter section**: **Rendered output added to head tag in HTML**
- ![2BD4253C47734CE49DD260DF769ABD24.png](https://doc.sitecore.com/api/markdown-image/xp/en/users/sxa/105/sitecore-experience-accelerator/images/2BD4253C47734CE49DD260DF769ABD24.png):

```xml
<meta content="Getting started with SXA. An introduction to working with Sitecore Experience Accelerator" property="twitter:description">
<meta content="Sitecore Experience Accelerator" property="twitter:title">
<meta content="http://sxa/-/media/Default-Website/cover.jpg" property="twitter:image">
<meta content="summary_large_image" property="twitter:card">

```

</details>

<details>
<summary><h2>Add custom metadata</h2></summary>

In addition to the standard user metadata, you can define custom metadata that is unique and meaningful to your business.

To add custom metadata:

1. In the Experience Editor, go to the page you want to improve.
2. On the ribbon, on the **Experience Accelerator** tab, click **Other**.

    ![09630E0AC344472CB7EB73A5677CE9AE.png](https://doc.sitecore.com/api/markdown-image/xp/en/users/sxa/105/sitecore-experience-accelerator/images/09630E0AC344472CB7EB73A5677CE9AE.png)

3. In the dialog box, in the **Custom Metadata** section, define the key value for your custom meta tag.

    For example, the following keys render the following HTML:

    - **Tag settings in Custom Metadata section**: **Rendered output added to head tag in HTML**
    - ![321C743CC8174FB0975D1787B7CFB1D0.png](https://doc.sitecore.com/api/markdown-image/xp/en/users/sxa/105/sitecore-experience-accelerator/images/321C743CC8174FB0975D1787B7CFB1D0.png):

    ```xml
    <meta name="customKey1" content="value1">
    <meta name="customKey2" content="value2">
    ```

</details>