Configure Open Graph properties
To configure Open Graph properties, perform the following:
- 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.
- 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.
- Create a new content item or page or edit an existing one.
You will see the new fields.
- Fill out the Title for social media field.
NOTE: If you do not fill it out, the OpenGraph title is automatically taken from the content item title.
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 field empty, Sitefinity CMS automatically fills it out with the content of the first field after the content of the content item, regardless of whether it is a long or short text field.
For example, if after the news item, you have a Summary field, 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.
Use the Image selector or the Video selector to fill out the Image and Video fields.
- 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.