Twitter: vs OG: Why have dedicated tags for Twitter?
Twitter is the only social portal which uses tags other than OG. An example tag may look like this:
<meta name="twitter:title" content="Burger vs Pizza">
It’s immediately obvious that this tag is similar to og:title in terms of both parameter and content. So why the differentiation?
Why have extra tags for Twitter?
To understand why Twitter has dedicated tags, we must first divide the tags into two groups:
A. Tags that parameterize data exact to the OG protocol (for example: twitter:title, twitter:description etc.).
B. Tags that parameterize data dedicated to Twitter cards only (e.g. twitter:card).
The Twitter crawler generates data for the card as follows:
- The content of the page is checked for twitter meta tags.If they exist, they will be presented in the card (e.g. if there are both “og:title” and “twitter:title” tags present on site’s source, then the content from the Twitter tag will be displayed in the Twitter card).
- The content of the page is checked for OG meta tags.If there are no Twitter tags, e.g. “twitter:description”, but the OpenGraph “og:description” tag exists, its content will be used in the tab instead.
- The content of the page is checked heuristically.
Hence, if we already have an OG tag (e.g. og:title), no separate Twitter tag (e.g. twitter:title) needs to be created for it.
Actually, even though separation of those tags allows us to manage their values separately, this action would seem to be pointless on any given page.
If you would like to provide the website with slightly better optimization (slightly smaller page size, less irrelevant content), and the page has tags from group A., it doesn’t make sense to generate them again in the Twitter version.
Group A – Twitter tags that parameterize data appropriate to the OG protocol
For example, tags:
twitter:title = og:title
twitter:description= og:description
twitter:image = og:image (!*)
If you’re using one of the above OG tags on your site, there’s no need to have it’s Twitter counterpart.
(*Please note that Twitter and Facebook use different proportions for images – as covered in a previous part 2 of this guide)
Please also note: twitter:card and og:type according to Twitter specifications can be treated identically, although “twitter:card” has values different to og:type, and so they are not identical tags.
Group B – tags that parameterize data dedicated only to Twitter cards
In this section, we will present all tags that can be used when setting a Twitter business card, divided into card types.
Let’s start with the tag which defines what type of card will be generated on Twitter and from there will present additional tags related to that type of card.
twitter:card (the type of card that should be generated for the site)
Example tag:
|
1 |
<meta property="twitter:card" content="summary" /> |
Additional information:
- The tag works like og:type with the difference that each available value (unlike FB) changes the appearance of our card according to the value
- Available values include “summary”, “summary_large_image”, “player” and “app”
Click any of the card types below to get more info about it
twitter:card = summary
(the social media card will be presented with a lot of description and a small image) [Default value]
|
1 |
<meta property="twitter:card" content="summary" /> |
Using this kind of card gives access to the following tags:
- Tags that have OG counterparts:
twitter:title (og:title)
twitter:description (og:description)
twitter:image (og:image)
- Tags that are Twitter dedicated:
twitter:site (name of the user responsible for the entry)
Example tag usage:
|
1 |
<meta property="twitter:site" content="@ds" /> |
Additional information:
- The tag is used to set the person (the Twitter account owner) responsible for the entry
- In accordance with the example tag
twitter:image:alt (alternative text for the image)
Example tag:
<meta property="twitter:image:alt" content="Course photo" />
Additional information:
- The tag is used to set alternative text if the tag photo is not loaded
twitter:card = summary_large_image
(the card will be formed with a large image and no text)
|
1 |
<meta property="twitter:card" content="summary_large_image" /> |
Using this kind of card gives access to the following tags:
- Tags that have OG counterparts:
twitter:title (og:title)
twitter:description (og:description)
twitter:image (og:image)
- Tags that are Twitter dedicated:
twitter:site (name of the user responsible for the entry)
Example tag usage:
|
1 |
<meta property="twitter:site" content="@ds" /> |
Additional information:
- The tag is used to set the person (the Twitter account owner) responsible for the entry
- In accordance with the example tag
twitter:image:alt (alternative text for the image)
Example tag usage:
|
1 |
<meta property="twitter:image:alt" content="Course photo" /> |
Additional information:
- The tag is used to set alternative text if the tag photo is not loaded
twitter:card = player
(the card will take the form of a video player)
|
1 |
<meta property="twitter:card" content="player" /> |
Using this kind of card gives access to the following tags:
- Tags that have OG counterparts:
twitter:title (og:title)
twitter:description (og:description)
twitter:image (og:image)
- Tags that are Twitter dedicated:
twitter:site (name of the user responsible for the entry)
- Example tag usage:
|
1 |
<meta property="twitter:site" content="@ds" /> |
Additional information:
- The tag is used to set the person (the Twitter account owner) responsible for the entry
- In accordance with the example tag
twitter:image:alt (alternative text for the image)
Example tag:
|
1 |
<meta property="twitter:image:alt" content="Course photo" /> |
Additional information:
- The tag is used to set alternative text if the tag photo is not loaded
twitter:player (Video URL)
Example tag:
|
1 |
<meta property="twitter:player" content="https://dsblog.com/videos/burgervspizza.mp4"/> |
Additional information:
- The tag should link to video that can be played without installing additional plugins or
extensions - The tag content should contain Absolute Secure URL (https: //)
twitter:player:width (film width needed to determine the aspect ratio of the player)
Example tag:
|
1 |
<meta property="twitter:player:width" content="1920" /> |
Additional information:
- The tag should contain a whole number [Integer]
- This tag is used in conjunction with the “twitter: player: height” tag to determine the aspect ratio of a movie in tweet
twitter:player:height (film height needed to determine the aspect ratio of the player)
Example tag:
|
1 |
<meta property="twitter:player:height" content="1080" /> |
Additional information:
- The tag should contain a whole number [Integer]
- This tag is used together with the
twitter:player:widthtag to determine the aspect ratio of a movie in a tweet
twitter:card = app
(the card will contain a link to download the application from Twitter)
This tag is used to display a tweet with the option to download the application.
This type of tweet is visible only on Twitter application.
Because our article focuses on websites, not application we will ignore this tags details.
However, if you would like more information on it’s usage, you can find some information here:
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/app-card
Summary
Thanks to the information contained in this article, we already know what tags to use for Twitter and how they will affect the final appearance of our business card.
I wish you the best of luck when using them!
Read also: Struggles and victories of the everyday work of a data scientist