Configuring Open Graph for Sites
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.
Custom <meta> tags are only included in page headers for unauthenticated users. They are not included when the user is logged in.
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.These values are overridden by page and display page configurations.
-
Preview your default
og:imageconfiguration.Keep in mind the image’s ratio may change depending on where its shared.
-
Click Save.
Analyzing the og:image Properties
When you select an image, DXP automatically adds structured properties that determine how your selected image appears. The Image field defines the following <meta> tags.
<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 og:image:alt tag.
<meta property="og:image:alt" content="This is an example." />