Open Graph (Facebook) and Twitter Card Meta tags

Open graph and Twitter Cards are automatically generated in Zesty.io. This document will explain how they load automatically and how you can override them.

Automated tags

All content items with a view and URL route in Zesty.io will have a title, description, and keywords associated with them. The tags produced in the header by these are:

These value will be used to auto fill in Open Graph and Twitter Cards tags.

Facebook Open Graph Tags

Facebook Open Graph Tags when an Image exists

Twitter Card Tags

Twitter Card Tags when an Image exists

How [default_image:automated] is Derived

Zesty.io will look for the first created content field that has a reference name that includes the string image or img. For example, a content field with the reference name hero_image would be a candidate. When there are multiple references with image or img in the name, Zesty.io will pick the first one created.

Images auto resize (cropped) to work with a 1200 pixel width and a 630 pixel height per Facebook's recommendation https://developers.facebook.com/docs/sharing/webmasters/images/.

How to Override Open Graph and Twitter Card Tags

You may override an Open Graph or Twitter Card meta tag on content models items by adding specific content fields to the model.

OG/Twitter Title

If you add a content field to a model named og_title, it will use that as the default for for the Open Graph meta title, and Twitter Card meta title. If a customer does not, it will default to the models meta title, which exists for every model with a view and route. If the customer wants a specific Twitter Card meta title, they can create a content field named tc_title on the model. NOTE: this will only apply to Twitter card, and will not default to Open Graph. If only tc_title exists, the Open Graph title will still default to the meta_title.

OG/Twitter Description

The same applies for the Open Graph description and Twitter Card description, which can be overridden with og_description and tc_description.

OG/Twitter Images

For Open Graph and Twitter Card images, it follows the same fallback logic and uses og_image and tc_image as the custom name. For images, if there is not og_image or tc_image tag, it will default to the first created content field with image or img in its reference name.