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.

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.

Facebook introduced Open Graph 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
<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">

When someone tweets a link to content on your website, twitter cards 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:

    Summary Card – shows a small image with summary text.

    Summary Card with Large Image – shows a large image with summary text.

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

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
  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
     <meta name="customKey1" content="value1">
    <meta name="customKey2" content="value2">