Adding twitter cards - how?

#1

is this just a case of adding a new metadata schema and applying to the relevant pages

Also, what is best practice for populating the fields automatically? is it best to use keywords from the title, desc and page thumbnail ?

thx in adv

(Tim Davison) #2

This is what we use. It’s a nested asset in the design, hence the globals all the time in the keywords. Uses some metadata fields, should be obvious what they are. Gives a good outcome for Twitter, Facebook and LinkedIn (and someone said Google+ is fine too). We assign the metadata to the global schema for the sites, authors can override on special pages if they like.

<meta property="og:title" content="%globals_asset_metadata_OpenGraph.Title%" />
<meta property="og:url" content="%globals_asset_metadata_OpenGraph.URL%" />
<meta property="og:type" content="%globals_asset_metadata_OpenGraph.Type%" />
<meta property="og:description" content="%globals_asset_metadata_OpenGraph.Description%" />
<meta property="og:image" content="%globals_asset_metadata_OpenGraph.Image_asset_url%" />
<meta name="twitter:card" content="%globals_asset_metadata_Twitter.Card%" />
<meta name="twitter:site" content="%globals_asset_metadata_Twitter.Site%" />

All values can be overridden by authors, but our metadata defaults are:

  • OpenGraph.Title ->%asset_name%
  • OpenGraph.URL ->%frontend_asset_url%
  • OpenGraph.Type -> “website”
  • OpenGraph.Description -> %globals_asset_type_code^eq:news_item:{globals_asset_attribute_body}:{globals_asset_contents_raw}^striphtml^trim^replace:\s+: ^maxchars:120%…
    (this one may need some explaining - first 120 chars from the content, remove extra whitespace and html. Just have to treat news items a little different as their content sits in a different place)
  • OpenGraph.Image -> Related asset field, set a default image.
  • Twitter.Card -> Two options, summary | summary_large_image, default is summary
  • Twitter.Site -> hardcode to your twitter tag (or in one case we use keywords to point to different ones depending on the section of the site as they have multiple)

And I’ll post a screenshot of what authors see in Edit+ (we’ve hidden some fields we don’t want them changing, admins can still change them though):

SNAG-0192.png874x372 19.8 KB

(Douglas (@finnatic at @waikato)) #3

Do you just want Twitter support or OpenGraph (facebook) support as well?

If you want multiple you may want to review this blog post by Jeremy Keith on Metadata markup where he proposes merging the two to reduce the amount of metadata :

Now the eagle-eyed amongst you will have spotted a crucial difference between the Twitter metacrap and the Facebook metacrap. The Twitter metacrap uses the name attribute on the meta element, whereas the Facebook metacrap uses the property attribute. Technically, there is no property attribute in HTML—it’s an RDFa thing. But the fact that they’re using two different attributes means that we can squish the meta elements together like this:
<meta name=“twitter:card” content=“summary”>
<meta name=“twitter:site” content="@adactio">
<meta name=“twitter:url” property=“og:url” content=“https://adactio.com/journal/9881”>
<meta name=“twitter:title” property=“og:title” content=“Metadata markup”>
<meta name=“twitter:description” property=“og:description” content=“So many standards to choose from.”>
<meta name=“twitter:image” property=“og:image” content=“https://adactio.com/icon.png”>

You can push Matrix to output metadata like that.

#4

thanks - we have twitter at the moment but will be using facebook next year

(Phillp Krasnoff) #5

Hi Tim.

What type of asset is it? and how is it nested in the design.
I’d love to set this up on our site.

Phillip

(Tbaatar) #6

This is just metadata applied globally to all assets and printed on the design file.