Please compare the following images illustrating post's tweets.
A complete card will look like this:
An incomplete card will look like this:
Note that the first post has a specific description and the image is a screenshot of the post's cover image, taken from the Blog landing page. This screenshot can be taken locally when previewing the site at localhost:4567/blog/.
Defining Social Media Sharing Information
Social Media Sharing info is set by the post or page frontmatter, by adding two variables:
This information is valid for the entire website, including all the webpages for about.GitLab.com, handbook, and blog posts.
All the images or screenshots for twitter_image should be pushed to the www-gitlab-com project at /source/images/tweets/ and must be named after the page's file name.
For the second post above, note that the tweet image is the blog post cover image itself, not the screenshot. Also, there's no description provided in the frontmatter, so our Twitter Cards and Facebook's post will present the fall back description, which is the same for all [about.GitLab.com].
For the handbook, make sure to name it so that it's obvious to which handbook it refers. For example, for the Marketing Handbook, the image file name is handbook-marketing.png. For the Team Handbook, the image is called handbook-gitlab.png. For Support, it would be named handbook-support.png, and so on.
The description is not meant to repeat the post or page title, use your creativity to describe the content of the post or page. Try to use about 70 to 100 chars in one sentence.
As soon as you add both description and social sharing image to a page or post, you must check and preview them with the Twitter Card Validator. You can also verify how it looks on the FB feed with the Facebook Debugger.
To see it working, you can either share the page on Twitter or Facebook, or just test it with the Twitter Card Validator.