Open Graph and Twitter Card tags on your Hub explained

Jan Griffiths

Last Updated: August 29, 2023 23:33

Learn what Open Graph tags and Twitter Card tags are, how they are used by your Hub, and how they are set.

What are Open Graph and Twitter Card tags?

Open Graph and Twitter Card tags are types of HTML tags. In HTML, tags are simply labels that indicate what each element on a webpage is. For example, the <title> tag signifies that the text it contains is the title of a page, the <img> tag indicates an image, and so on.

Some HTML tags are meta tags that contain metadata, or "data about data". Metadata provides information about the contents of a webpage, such as the title, content type, description, etc. Open Graph tags and Twitter Card tags fall into this category: they contain information about the page they're on, and are intended to tell other websites and web services what the page is about.

What do these tags do?

When you share a link on social platforms like Facebook or Twitter, or on messaging apps like Slack, you've probably noticed that a little preview of the destination page automatically appears. For example, when this URL is shared on Twitter...

https://hub.uberflip.com/blog/how-technology-and-software-marketers-use-uberflip

...it turns into this:

How do social platforms know what to display in these previews? They simply visit the link and look at its Open Graph tags or Twitter Card tags. Both types of tags are specifically designed to tell web platforms and services what they should display when a link to the page is shared.

The benefit of using these tags is pretty clear: where a plain URL link offers almost no information about the content it points to, a preview provides the title and a brief description to tell people why clicking the link is worth their time. And when an image is included, a preview is also far more eye-catching than just a text-only link.

How does my Hub use these tags?

Uberflip automatically creates Open Graph and Twitter Card tags in the <head> section of the HTML on all Item pages, Stream pages, and Hub home pages of your Uberflip Hubs. The values of these tags are automatically populated using metadata from the corresponding Hub, Stream, or Item.

What's the difference between Open Graph tags and Twitter Card tags?

You might be wondering why there are two types of tags that seem to do the exact same thing. The reason is simple: Facebook and Twitter each decided to design their own protocols, and both are widely used. In practice, some web services support one protocol or the other, and many support both. Facebook's Open Graph protocol is generally used by more services (such as LinkedIn, Pinterest, and even Twitter); Twitter's Twitter Card protocol was originally intended primarily for use on Twitter, but is also supported by some services such as Slack.

When it comes to your Uberflip Hubs, the bottom line is that you don't need to worry about the difference. To make sure all your bases are covered, your Hubs generate both types of tag, with the same information in each set of tags.

To see the tags for your own Hubs, simply visit any page in a Hub, right-click anywhere, then click on View Page Source. When the source code appears, do a search for "og:" or "twitter:" to see the tags. For example, here they are for the example post shown above:

Open Graph tags

Twitter Card tags

Open Graph tags

Open Graph tags are all in the format of og:tagname. Uberflip creates the following Open Graph tags for Hub home pages, Stream pages, and Item pages:

Tag	Description
`og:type`	The content type, i.e. `website`
`og:title`	The title of the content, e.g. "An Example Blog Post"
`og:url`	The (canonical) URL of the content
`og:description`	A brief description of the content
`og:image`	A thumbnail image that will be shown with the content when shared (in some cases, dimensions will also be specified with `og:image:width` and `og:image:height` tags)

Twitter Card tags

Twitter Card tags are in the format twitter:tagname. Uberflip creates the following Twitter Card tags for Hub home pages, Stream pages, and Item pages:

Tag	Description
`twitter:card`	The type of Twitter card that should be displayed using the tags
`twitter:image`	A thumbnail image that will be shown with the content when shared
`twitter:title`	The title of the content, e.g. "A Blog Post"
`twitter:description`	A brief description of the content
`twitter:site`	The Twitter account associated with the content

Note

When creating previews from Twitter Card tags, Twitter respects any indexing rules (i.e. robots meta tag/robots.txt) present for that website. If you have set your Hub to not be indexed by turning on the No Robots Meta Tag setting, Twitter will interpret this to mean that it should not display any content from that Hub, including images. As a result, sharing content from a Hub set to noindex will cause the resulting Twitter card previews to be shown without images.

Can I change these tags?

The Open Graph tags and Twitter Card can't be modified directly: their values are automatically set using data taken from the relevant Hub, Stream, or Item. For example, the og:title/twitter:title tags for an Item page are set using the Item title you specified in the Uberflip app.

This means you can indirectly set the values of some tags by changing the fields that they are tied to in the Uberflip app (see below for details). These tags are always linked to their respective app fields and can't be set independently, so you can't have an Open Graph/Twitter Card title that's different from the Item title in your Hub, for example.

Note also that some tags are fixed, or preset based on the type of page, and can't be changed as they are not tied to any user-editable field.

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

Hub level

Open Graph Tag	Twitter Card Tag	Set by
`og:title`	`twitter:title`	Appearance > Branding > Text > Company Name
`og:description`	`twitter:description`	Appearance > Branding > Text > Full Description
`og:image`	`twitter:image`	Appearance > Branding > Image > Hero Logo
`og:type`	N/A	Always set to `website`
`og:url`	N/A	Primary Hub domain
N/A	`twitter:card`	Always set to `summary`
N/A	`twitter:site`	Hub Options > Sharing > Twitter

Stream level

Open Graph Tag	Twitter Card Tag	Set by
`og:title`	`twitter:title`	Content > Manage Stream > Stream Name
`og:description`	`twitter:description`	Content > Manage Stream > Stream Description
`og:image`	`twitter:image`	*Thumbnail* from most recent Item
`og:type`	N/A	Always set to `website`
`og:url`	N/A	Content > Manage Stream > Metadata > URL Path
N/A	`twitter:card`	Always set to `summary_large_image`
N/A	`twitter:site`	Hub Options > Sharing > Twitter

Item level

Open Graph Tag	Twitter Card Tag	Set by
`og:title`	`twitter:title`	Content > Edit Item > Item Title
`og:description`	`twitter:description`	Content > Edit Item > Metadata > Description
`og:image`	`twitter:image`	Thumbnail of Item
`og:type`	N/A	Always set to `website`
`og:url`	N/A	Content > Edit Item > Metadata > URL Path
N/A	`twitter:card`	Always set to `summary_large_image`
N/A	`twitter:site`	Hub Options > Sharing > Twitter

Where Set by indicates a user-modifiable field/setting in the Uberflip app, the tag is linked to that field/setting, and changing it will update the tag.
The og:url tag will always reflect the actual URL of the Hub, Stream, Item. Twitter Card previews derive the URL from the shared link itself, so the URL is not stated in the Twitter Card tags.
The og:type and twitter:card tags are always set using preset values that can't be modified.

How are these tags different from the other meta tags on Hub pages?

The HTML of every page on your Hub contains several other meta tags in addition to the Open Graph and Twitter Card tags:

Uberflip will configure all of these tags for you automatically, so you don't need to worry about most of them them. However, there are two non-Open Graph/Twitter Card meta tags that you should know about:

meta name="title" and
meta name="description"

The reason these two meta tags are important is because they are used by search engines as the title and snippet when the page is shown in search results, like this:

As a result, we refer to these tags in the Uberflip app as the SEO Title and SEO Description, or "meta-title" and "meta-description".

By default, the meta-title and meta-description tags are set in the same way as the Open Graph and Twitter Card title and description tags, so they will usually be the same. However, if you want, you can set the meta-title and meta-description tags independently to display an alternative title and description for any page. To do this, simply set an SEO Title and/or SEO Description for any Hub, Stream, or Item page. To learn more, see this article.