Open Graph properties of widgets

You can configure the display of Open Graph content items only for a particular MVC widget.
For example, configure only the News items that are displayed on a particular page, by a particular News MVC widget.

To do this, perform the following:

  1. Open the page where the widget that you want to configure is located.
  2. Open the widget designer, by clicking Edit.
    This must be an MVC widget.
  3. Navigate to the advanced properties, by clicking Advanced.
  4. Click MetadataFields.
  5. In OpenGraphTitle, enter a name of a field that belongs to the module.
    For example, enter Tags
    This way, the OpenGraphTitle will be populated with the Tags of the content item.
  6. In OpenGraphDescription, enter a name of a field that belongs to the module.
    For example, enter Summary
    This way, the OpenGraphDescription will be populated with the summary that you created for the content item.
  7. In OpenGraphEnabled, enter true
    This setting enables and disables the OpenGraph fields of the particular widget.
  8. In OpenGraphImage or OpenGraphVideo, enter one of the following:
    • A a link to the image or the video that you want to represent the content item. 
      It can be a link to an image or video from a Sitefinity CMS library or any other link to a media item.
    • A name of the field that belongs to the module and stores an image or video. The field can be either Short Text or Related media field of type Image or Video.
  9. Click Save.

Association of Open Graph fields and module fields

  • If you leave OpenGraphTitle field empty, Sitefinity CMS adds meta property og:title and takes its value from the Title field of the static content item or from the identifier field of a dynamic content item. Otherwise, the og:title property is populated with the contents of the field that you have entered in OpenGraphTitle field.
  • If you leave OpenGraphDescription field empty, Sitefinity CMS checks whether the content type has a custom field named Description.
    • If the content type has a custom field named Description, but it is empty, Sitefinity CMS does not add a meta property og:description.
    • If the content type has a custom field named Description and it is filled out, Sitefinity CMS adds meta property og:description and takes its value from what you have entered in Description field.
  • If you leave OpenGraphImage or OpenGraphVideo fields empty, Sitefinity CMS does not add an Open Graph image or video meta property.

Priorities of loading OpenGraph properties on pages

If on a page you have more than one widget displaying an item in details mode, by default, the page loads the OpenGraph properties of the last widget - the widget that is ordered last in the HTML of the page.

You can control whose OpenGraph properties to load, by enabling and disabling the OpenGraph properties of the widgets on a particular page.

To do this, in OpenGraphEnabled field, enter true or false, respectively.

EXAMPLE: You have a page displaying a blog post and after the blog post, the page also displays a news item in detailed mode. By default, the OpenGraph properties of the News widget will be loaded for this page. 
If you want to display the properties of the Blog post widget, in the OpenGraphEnabled field of the News widget, enter false and in the OpenGraphEnabled field of the Blog posts widget, enter true

NOTE: If you want to display the OpenGraph properties of the page, where the widgets in detail view are located, you must disable the OpenGraph fields for all widgets on that particular page. This way, the OpenGraph fields of the page will be loaded.

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

Web Security for Sitefinity Administrators

The free standalone Web Security lesson teaches administrators how to protect your websites and Sitefinity instance from external threats. Learn to 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?