Topics

All topics

Configure Open Graph properties

To configure Open Graph properties, perform the following:

  1. Open the static module whose content items you want to configure and in the right pane, click Custom Fields for <content type>.
    For dynamic modules, navigate to Administration » Module builder, click the module and, then, the content type.
    For pages, navigate to Pages grid, and in the right pane, click Custom fields.
  2. Create the following custom fields:
    • Type: Social media (OpenGraph), OpenGraph field: OpenGraph title.
    • Type: Social media (OpenGraph), OpenGraph field: OpenGraph description.
    • Type: Social media (OpenGraph), OpenGraph field: OpenGraph image.
    • Type: Social media (OpenGraph), OpenGraph field: OpenGraph video

      NOTE: When you create the fields, you can make them localizable. This way, you can display different content items for different language versions. For more information about creating custom fields, see Create custom fields.

  3. Create a new content item or page or edit an existing one.
    You will see the new fields.
  4. Fill out the Title for social media field.

    NOTE: If you do not fill it out, the OpenGraph title is automatically taken from the Title for search engines field. If this field does not exist or is empty, then the Title for social media field is populated with the content item's Title field.

  5. Fill out the Description field.

    RECOMMENDATION: To get an optimal display, we recommend setting the length of the Title field not longer than 70 symbols, and the length of the description field to be between 160 and 200 symbols.

    IMPORTANT: If you leave the Description for the OpenGraph field empty, Sitefinity CMS automatically fills it out according to the following procedure:
    1. For Pages, the content of the Description filed is used. For other static and dynamic content items, the content of the Description for search engines field is used.
    2. If the above fields are empty or do not exist, the content of the first Long text or Short text field after the identifier field, such as Title, is used.
      For static modules, this is the Content field.
    3. If the above fields are empty or do not exist, the Description field stays empty.
    For example, in a news items, if after the Title field, you have a Summary field of type Short text, the Description field will be populated with the content of the Summary field. For dynamic modules, you can use Modify the backend screens of a dynamic module to change the order of the fields.

     

  6. Use the Image selector or the Video selector to fill out the Image and Video fields.
  7. To display the content item in an Open Graph format, paste the link to the detailed page in a social network, for example.

RESULT: When you paste a link to the detailed page of a content item in a social network that supports Open Graph, your content item will be displayed with the title, description, and image or video that you specified above. The Open Graph meta fields are added in the <head> tag of the page that displays the detailed item.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?

Next article

Association of custom fields and Open Graph meta properties