How to Setup & Validate Summary Cards for Twitter Cards Meta

Posted OnMay 18, 2015     CategoryPlugins     CommentsNo comment

In this section of the guide to the Twitter Cards Meta plugin, we will show you how to set up and validate the Summary Card.

Summary Cards can be used for many kinds of web content, from blog posts and news articles, to products and restaurants.

For this example, a Flickr Account was created and referenced in the Meta Tags shown below.

Prior to continuing, perform the following steps:

  • Navigate to Settings -> Twitter Card Meta and make sure the Twitter Card Selection Type is set to Summary Cards.
  • If you do not have a Flickr Account, one will need to be created.
  • Note: we strongly recommend creating a child theme for this

Step 1) Login to the WordPress Dashboard.

Step 2) From the left-hand sidebar of the Dashboard, navigate to Appearance -> Editor.

\Step 3) From the right-hand sidebar, locate and click on the header.php file.

Step 4) In the main editor, you should now see the contents of the header.php file.

Step 5) Locate the <head> tag, and add in the following lines of code (replace with your own information):

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@ecakesonline" />
<meta name="twitter:title" content="ECakes Online" />;
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />
<meta name="twitter:url" content="https://www.flickr.com/groups/2730013@N24/" />

Reference Guide

Card Property Description Required
twitter:card Should be set to a value of summary Yes
twitter:site The Twitter @username the card should be attributed to. No
twitter:title Title should be concise and will be truncated at 70 characters. Yes
twitter:description A description that concisely summarizes the content of the page, as appropriate for presentation within a Tweet. Do not re-use the title text as the description, or use this field to describe the general services provided by the website. Description text will be truncated at the word to 200 characters. Yes
twitter:image URL to a unique image representing the content of the page. Do not use a generic image such as your website logo, author photo, or other image that spans multiple pages. The image must be a minimum size of 120px by 120px and must be less than 1MB in file size. For an expanded tweet and its detail page, the image will be cropped to a 4:3 aspect ratio and resized to be displayed at 120px by 90px. The image will also be cropped and resized to 120px by 120px for use in embedded tweets. No

Step 6) Click the Update File button to save the changes.

km-twitter-sample-02aa

Validating the Summary Card

Step 7) Once the tags shown above have been added, you can submit your Card for approval using the Twitter Card Validator tool.

Step 8) On the Twitter Card Validator page, enter your Twitter URL in the textbox.

Step 9) Click the Preview Card button.

km-twitter-sample-03a

Step 10) If successful, a page similar to the one shown below will display.

km-twitter-sample-10a

Step 11) Click the View on Web hyperlink.

km-twitter-sample-11a

You will receive an email once Twitter approves your request.
This approval can take anywhere from 24 – 72 hours.

The next step of the guide will focus on Setup & Validate Photo Cards for Twitter Cards Meta.

 


Leave a Reply

Your email address will not be published. Required fields are marked *

Send this to friend