Todays excercise for me is/was to learn and understand how Twitter Cards work with the Ghost blogging platform.
Note: To make this excercise a bit easier for me, I have made this entry public while it's still being updated.
What is Twitter Card?
Twitter – as well as other social media players – like when people share links pointing to some web pages, that is when people tweet about something, and that something contains a link somewhere in the Internet, for example, in this excercise a link to this very blog entry you are now reading.
To make the user experience better, Twitter can use some additional optional data regarding the web page. This additional data includes:
- Title of the page
- Description of the page
- Link to the page
- Image to be displayed in some situations
- Written by
- Filed under
- Twitter user id for the whole site
- Twitter user id for the page
This data is made available to Twitter (and others) in the HTML header section using HTML
meta elements. As an example, see below the additional data for this blog entry:
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Text entered into the Twitter Title field: Title shown on Twitter Card" /> <meta name="twitter:description" content="Text entered into the Twitter Description field: Description shown on Twitter Card" /> <meta name="twitter:url" content="https://blog.nopunen.fi/twitter-cards-twitter-kortit/" /> <meta name="twitter:image" content="https://blog.nopunen.fi/content/images/2018/04/TwitterCardsBlogIllustrationTwitterCard-6.png" /> <meta name="twitter:label1" content="Written by" /> <meta name="twitter:data1" content="Matti Sarjakoski" /> <meta name="twitter:label2" content="Filed under" /> <meta name="twitter:data2" content="Ghost, blog, Twitter" /> <meta name="twitter:site" content="@msrjksk" /> <meta name="twitter:creator" content="@msrjksk" />
Note, that you, perhaps as a developer, may just write that data directly into the html code, which might be a bit tedious. But for most of us, that is not necessary, as taking care of this data is often implemented into the publishing platform itself, as in this case, the Ghost platform. All you (as the author of the page) need to do is to go to Twitter Card section in the page settings of the editor and enter the additional data. Ghost will take care of the rest.
Besides Twitter Card, Ghost also supports a similar optional data for Facebook, Pinterest, Google+ and Search.org.
Note that one of the Twitter Card data items you may enter, is a reference to an image. The idea is, that you may provide an image that is optimized for Twitter only.
And what do you get?
So what happens, when someone actually tweets about this blog entry? Well, I could not wait. If you came here from Twitter, you already saw it. But if you did not, then you may use this link to see my own tweet that contains a link to this page. What you see there, depends on Twitter, but should now be optimized for Twitter – as an example. You can also test your web page's Twitter Card data using the Twitter Card Validator, see links at the end.
In my first try (when you go to my tweet above), the image was not shown at all. Now I know why. The dimensions of the image were too small. People in the Ghost Forum helped me, thanks. After fixing that, the image is shown in the tweet as expected. And yes, all these details were documented. (This paragraph was updated on April 23, 2018).
Note that, depending on your device, you will get different layouts: The image provided for Twitter Card may be shown either above or to the left of the title and description texts.
Need to know more?
- More on Twitter cards in Twitter's documentation, go here.
- Try Twitter Card validator, go here.
- More on Twitter cards in Ghost's documentation, go here.
Thanks for reading. Kiitos kun luit.