How to Setup & Validate Photo Cards for Twitter Cards Meta
In this section of the guide to the Twitter Cards Meta plugin, we will show you how to set up and validate the Photo Card.
The Photo Card puts the image front and center in the Tweet. Clicking on the photo expands it to a larger view.
On twitter.com and mobile clients, the image will display below the tweet text.
For this example, a Flickr Account was created and referenced in the Meta Tags shown below.
|Prior to continuing, perform the following steps:
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="photo" /> <meta name="twitter:site" content="@ecakesonline" /> <meta name="twitter:title" content="Mountain sunset" /> <meta name="twitter:description" content="Explore Reza-Sina's photos on Flickr. Reza-Sina has uploaded 113 photos to Flickr." /> <meta name="twitter:image" content="http://farm8.staticflickr.com/7334/11858349453_e3f18e5881_z.jpg" /> <meta name="twitter:url" content="https://www.flickr.com/groups/2730013@N24/" />
|twitter:card||Should be set to a value of photo||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.||No|
|twitter:image||A URL to the image representing the content. Image must be less than 1MB in size.||Yes|
|twitter:image:width||Providing width in pixels helps us more accurately preserve the aspect ratio of the image when resizing.||No|
|twitter:image:height||Providing height in px helps us more accurately preserve the aspect ratio of the image when resizing.||No|
Step 6) Click the Update File button to save the changes.
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.
Step 10) If successful, a page similar to the one shown below will display.
Step 11) Click the View on Web hyperlink.
|You will receive an email once Twitter approves your request.
This approval can take anywhere from 24 – 72 hours.
This concludes our guide of the Twitter Cards Meta plugin.