Customize Open Graph Tags for Your Hub

Follow

Learn how the Open Graph tags for your Hub are set, and how you can customize them.


 

Before You Begin

  • To modify the Open Graph tags in your Hub, you need to be an Account Admin or Content Manager.

 

What are Open Graph Tags?

Open Graph tags are part of the Open Graph protocol, which is used by social media sites like Facebook. Open Graph tags are metadata: they provide information about content, such as the title, content type, description etc. Whenever the content is shared on social media (or elsewhere), this metadata is what is displayed. In this example from Facebook, Open Graph tags define everything that appears within the highlighted area:

Uberflip_-_Home.png

To make them easy to share on social media, many websites incorporate Open Graph tags (or "OG tags") — including your Uberflip Hub. They appear within the <meta> section of the <head> of a website and are all in the format of og:tagname, such as og:title, og:description, etc.

You can easily see the OG tags for your own Hub by visiting the Hub, right-clicking anywhere, then clicking on View Page Source. When the source code has loaded, do a search for "og:" to see the tags:

view-source_https___hub_uberflip_com.png

 

How Open Graph Tags are Set in Uberflip Hubs

Uberflip will automatically create the following default OG tags for your Hubs, Streams, and Items:

  • og:title: The title of the content, e.g. "My Hub"
  • og:description: A brief description of the content
  • og:image: A thumbnail image that will be shown with the content when shared
  • og:type: The type of the content
  • og:url: The canonical URL of the content

The og:titleog:description and og:image tags are set using metadata taken from the relevant Hub, Stream, or Item.

The tables below outline which fields are used to populate the tags for each type of content:

Hub Level

Open Graph Tag Metadata taken from...
og:title Appearance > Branding > Text > Company Name
og:description Appearance > Branding > Text > Full Description
og:image Appearance > Branding > Image > Hero Logo
og:type Always set to website
og:url Primary Hub domain

Stream Level

Open Graph Tag Metadata taken from...
og:title Content > Manage Stream > Stream Name
og:description Content > Manage Stream > Stream Description
og:image Thumbnail from most recent Item
og:type Always set to website
og:url Content > Manage Stream > Metadata > URL Path

Item Level

Open Graph Tag Metadata taken from...
og:title Content > Edit Item > Item Title
og:description Content > Edit Item > Metadata > Description
og:image Thumbnail of Item
og:type Always set to website
og:url Content > Edit Item > Metadata > URL Path

 

Customize Open Graph Tags

If you want, you can choose to set an alternative title and description for a Hub, Stream, or Item whenever it is shared. The SEO Title and SEO Description fields override the default metadata fields used to populate the og:title and og:description fields, so their contents will be used if present.

For example, imagine you've set the title of your Hub to "ACME Co." under Appearance > Branding > Text > Company Name:

  • If you leave the SEO Title field for your Hub empty, the og:title tag will default to "ACME Co."
  • If you enter "ACME Resources Hub" into the SEO Title field for your Hub, the default field will be overridden, and the og:title tag will be set to "ACME Resources Hub" instead

Note

the og:image, og:type and og:url tags are always set using the default value, and can't be overridden.

The tables below describe where to find the SEO Title and SEO Description fields for each type of content:

Hub Level

Open Graph Tag Overridden by...
og:title Appearance > Branding > Text > SEO Title
og:description Appearance > Branding > Text > SEO Description

Stream Level

Open Graph Tag Overridden by...
og:title Content > Manage Stream > Metadata > SEO Title
og:description Content > Manage Stream > Metadata > SEO Description

Item Level

Open Graph Tag Overridden by...
og:title Content > Edit Item > SEO > SEO Title
og:description Content > Edit Item > SEO > SEO Description

Note

The primary purpose of the SEO Title and SEO Description fields is to specify the title and description shown in search engine results, as described in this article. As a result, keep in mind that modifying these fields to override the associated OG tags will also affect the title and description shown in some search results.

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.