Configuring Open Graph¶
Available: Liferay DXP/Portal 7.3+
Open Graph is an Internet protocol that standardizes previews of Site content when shared in application contexts that support it, such as Facebook, Slack, and Twitter. It does this by embedding structured data in page headers as
<meta> tags, similar to RDFa.
By default, Open Graph
<meta> tags are embedded in all public Liferay Pages, but you can disable this behavior at the Site level if desired. In Site settings, you can also set default
og:image properties. These values are used for all Pages, unless they’re overridden at the Page or Display Page level.
<meta> tags are only included in page headers to unauthenticated users. They are not included when the user is logged in.
Follow these steps to configure Open Graph for your Site:
Open the Site Menu () and go to Configuration → Settings (previously Site Settings).
Scroll down to the Open Graph sub-heading and expand it.
Check/uncheck the Enable Open Graph setting to enable/disable Open Graph for your Site.
(Optional) Use the Image and Image Alt Description fields to set default
og:imageproperties for the Site’s Pages.
Preview your default
Keep in mind the image’s ratio may change depending on where its shared.
When you select an image, DXP automatically adds a number of structured properties that determine how your selected image is displayed. The Image field defines the following
<meta property="og:image" content="http://example.com/ogp.jpg" /> <meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /> <meta property="og:image:type" content="image/jpeg" /> <meta property="og:image:width" content="400" /> <meta property="og:image:height" content="300" />
When you enter text into the Image Alt Description field, you determine the default text read by screen readers for your selected image.
To create localized alt descriptions for your Open Graph image, click on the Language Flag button and select the language you want to set. Values entered here define the default
<meta property="og:image:alt" content="This is an example." />