Open Graph and Twitter Card Tags on Your Hub Explained

Follow

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:

og1.png

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

og2.png

Twitter Card tags

og3.png

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

 

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:

og4.png

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"

og5.png

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:

og6.png

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.

0 out of 0 found this helpful

Comments

3 comments
  • A lot of the images are broken on this page.

    0
    Comment actions Permalink
  • Hi Jake, sorry about that! I've reuploaded all the images in this article, so they should now be working. This is a weird Zendesk thing that sometimes happens — for me, the images were all still showing up, so thanks for pointing this out!

    0
    Comment actions Permalink
  • Thanks Jan!

    0
    Comment actions Permalink

Please sign in to leave a comment.