oo
Analytics Cloud
Commerce
DXP / Portal
Liferay Cloud
Reference
Site Settings

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.

note

Open Graph <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:

  1. Open the Site Menu (Site Menu) and go to Configuration → Settings (previously Site Settings).

  2. Scroll down to the Open Graph sub-heading and expand it.

  3. Check/uncheck the Enable Open Graph setting to enable/disable Open Graph for your Site.

    Enable or disable embedded Open Graph tags in your Site's Pages.

  4. (Optional) Use the Image and Image Alt Description fields to set default og:image properties for the Site’s Pages.

    These values are overridden by Page and Display Page configurations.

    Define the default og:image and og:image:alt properties used for your Site.

  5. Preview your default og:image configuration.

    Keep in mind the image’s ratio may change depending on where its shared.

    Preview your default Open Graph configuration.

  6. Click Save.

Analyzing the og:image Properties

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> 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." />
Capability:
Sites
Deployment Approach:
Liferay PaaS
Liferay SaaS
Liferay Self-Hosted
Feature:
SEO