A short guide on how to create twitter cards in MetroPublisher.
Twitter currently allows 4 types of cards:
- Summary card
- Summary card with Large Image
- Player Card
- App Card
Metro Publisher allows adding twitter cards for most content types. In particular: Summary cards are created automatically for most content types. Player and App card can be created for articles, events, location searches and event searches. Locations cannot currently have Player and App card. Here is a summary of the currently supported cards by content type.
|Content type||Summary cards||Player/App cards|
General settings: if you insert your twitter account in the general settings, MetroPublisher will automatically generate the basic twitter metadata tags inside the html for the main content types (articles, locations, events, pages, locations and event searches).
You can insert the specific metadata (meta-title, description, keywords, teaser image) in the corresponding content edit page. This option will enable Twitter to find the Summary Card meta data (simple or with large images).
If you've not activated the Twitter Cards option in 3rd Party Settings, Twitter will try to use the opengraph tags to generate a Summary Card. Thus, if you insert the metadata and opengraph fields for the content, that is the data that will be shown in the Twitter summary card. If you don't specify metadata, the system will use the main fields (ex. title and description).
Additional settings for Player and App cards:
Player and App cards require additional fields (ex. the url for the media resource, or the app download) which need to be inserted manually. You can insert these fields manually into the content.
1- Prepare the twitter code:
This is an example of the code for a Player Card. Here you can check which fields are mandatory and which are optional: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/player-card
<meta name="twitter:card" content="player"/>
<meta name="twitter:creator" content="@myuser"/>
<meta name="twitter:site" content="@myuser"/>
<meta name="twitter:title" content="my title"/>
<meta name="twitter:description" content="my description"/>
<meta name="twitter:image" content="http://testsite/test.jpg"/>
<meta name="twitter:image:alt" content="420"/>
<meta name="twitter:player" content="https://www.youtube.com/myvideo"/>
<meta name="twitter:player:width" content="500"/>
<meta name="twitter:player:height" content="300"/>
Here you can check the sample code for the App Card and verify which fields are mandatory and which are optional: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/app-card
2- insert the code in the html:
The strategy varies for different content types:
- HTML pages/templates: you can insert the raw code into the Header field.
- Articles, events, location searches and event searches: you can create an embed inside the content, and paste the code into it.
- Sections: you can create an html sprocket and insert the code there.
- If you are a Pro user, you can activate the 'Header field for content' in the admin content settings tab and insert the code there (for articles and sections only).
3- Validate the card:
Use the twitter card validator (https://cards-dev.twitter.com/validator) to make sure that the card is correct and is showing what you expect.
Please contact the support staff if you experience any problems.