If want to control the appearance of your photos, videos or link tweets on Twitter, setting the right Twitter Card Meta Tags in your blog posts meta data is important! But what are Twitter Cards and why are they so essential?
Twitter Cards are a custom set of Social Meta Tags in your website’s HTML, which allow you to control the appearance and post format of your tweets. If you share a link on Twitter these parameters tell the network, which image, title and description to pull and display in an automatically generated link preview.
Why do I need Twitter Cards?
Twitter has changed its policy for posting link posts via plugins or web applications. Twitter does no longer display the featured or selected image for your blog post, but only images defined in the Twitter Card Meta Tags of your blog post. If you have not defined any Twitter Card Meta Tags, Twitter displays a random image from your blog post or blog site. If you have defined an image in your blog post Twitter Card Meta Tags that does not meet the image size requirements, Twitter displays a white space for the image of your link post.
Please make sure that your image meets the image size requirements for Twitter.
What are the most important Twitter Cards Meta Tags?
While Twitter Cards offer a wide variety of post formats, there are three very basic Twitter Cards Meta Tags which are the most important. To provide all necessary information to turn your website link in a correct link preview, you need to define the image, the title and the description.
The Twitter Card Tag: twitter:image
The image tag is the most important Twitter Card Meta Tags or at least the most obvious if not set correctly. It’s the Twitter Card Tag responsible for the correct image information. Twitter crawls your website’s code in search for an image to pull in the automatically generated link preview. If you have not set the twitter:image tag, Twitter might not display any image. Instead of the correct featured image of your post, Twitter will then show a white space or a wrong image.
<meta name="twitter:image" content="https://www.blog2social.com/en/blog/wp-content/uploads/2017/01/A-Complete-Guide-1.png" />
The Twitter Card Tag: twitter:title
There is nothing better than a catchy title to encourage your followers to like, click or retweet. Defining the intriguing title is exactly what the twitter:title tag is for. It is providing all necessary information for Twitter to display a bold headline in the automatically generated link previews of your blog post.
<meta name=”twitter:title” content=”A Complete Guide To Social Media Sharing” />
The Twitter Card Tag: twitter:description
Additionally, your post should show a description of what your blog post or shared website is all about. This Twitter Card tag is very similar to the regular HTML tag, however, instead of showing up in the Google search results, this little snippet will show up in the generated link preview.
As Twitter will not show more than the first two lines, try to keep it short and sum up your blog post in less than 200 characters.
<meta name=”twitter:description” content=”Social media automation tools can boost your efficiency.” />
Tip: You can check whether your Twitter Cards Meta Tags are set correctly by copy-pasting your blog posts URL into the Twitter Cards Validator.
How do I implement Twitter Card Tags on my WordPress blog?
There are different ways and tools to implement open graph tags in your website’s meta data. The easiest and most efficient way to do so when sharing your blog posts to Twitter, is to use the social media automation plugin Blog2Social.
With Blog2Social you can select a featured image or any image you select to be displayed with your link post. Blog2Social will automatically write the required parameter in the Twitter Card meta tags of your blog post, so that your selected image will be displayed with your link post.
To do so click on the image displayed in your Blog2Social editor and select your desired image.
Same goes for defining the og:title and og: description tag for your blog posts. Simply click into the respective fields in your Blog2Social post preview and type in your intriguing title and description to be displayed on your Twitter profile.
If you have defined your own Twitter Cards Meta Tags,you can easily deactivate this Blog2Social feature. To do so, go to your Blog2Social settings - select the tab “Social Meta Data” and untick the box “ Add Twitter Cards Meta tags to your shared posts and pages, required by Twitter to display your post and page image, title and description correctly.
Please note that you cannot select a specific image for your link post without OG meta tags.