Enabling Facebook Open Graph Tags

Respond 6 allows you enable Facebook Open Graph tags to make your site easily shareable on Facebook. Respond will automatically populate the tags based on data from your site.

Add Open Graph Tags to your HTML

Respond supports the og:url, og:title, og:description, and og:image tags by default. These are automatically filled in when the tags are added to a site or page.

<!-- open graph -->
<meta property="og:url" content="{{page.fullUrl}}" />
<meta property="og:type" content="website" />
<meta property="og:title" content="{{page.title}}" />
<meta property="og:description" content="{{page.description}}" />
<meta property="og:image" content="{{page.image}}" />

Set URL setting

The URL setting must be set for the Open Graph tags to work properly. Make sure the following is added to your settings.json file at resources/sites/my-site/setting.json. If a type: text is set, you can edit this in the application.

[...
  {
      "id": "url",
      "label": "URL",
      "description": "The url for your site, e.g.: https://respondcms.com",
      "type": "text",
      "value": ""
  },...
]