HTML5 Snippets - Customize And Add Multiple Images To Tweets That Link To An Image From A Collection Of Images From Your Web Page Using The <meta> Element Cover Image

HTML5 Snippets - Customize And Add Multiple Images To Tweets That Link To An Image From A Collection Of Images From Your Web Page Using The <meta> Element

Published:

Rate Article (Sign in and be the first to rate this article.)

Article Details

Views: 596

First Published:

Word Count: 2669

Edition: 1

Lets say, for example, you have a photo album full of images or a slide show of images located on a web page from your web site and someone with a Twitter account decides to tweet a link to one of those images on your web page. Well Twitter will allow you to customize on how that tweeted link will be displayed on its web site to a certain extent. For example, you can display the image of the tweeted link along with an additional 3 different images to represent your collection of images from your web pages content for a total of 4 images that can all be displayed at once in the tweet for Twitter's users to view before they click through to your web page. In-order to customize a tweet that displays 4 different images at once. You will need to use one of the Twitter Cards that Twitter gave to us for this very reason, which are basically <meta> elements. Twitter offers a collection of different Twitter Card types, but for our case we will need to use Twitter's Gallery Card format.

The Gallery Card is a way for you to inform Twitter's users that there is more than just a single image associated with the tweeted link, but rather a gallery of related images or in-other words a collection of related images like a photo album or slide show.

Now the Gallery Card requires 7 different <meta> elements in-order for it to work properly. Our first required <meta> element will need the name attribute and content attribute. You will then need to include the twitter:card value for the name attribute in-order to tell Twitter's web crawler to expect a Twitter Card from your web page. Next you will need to include the content attribute. The content attribute should have the value of gallery in-order to tell Twitter's web crawler that you would like to use Twitter's Gallery Card format for your web pages content.

For our second required <meta> element we will also need the name attribute and content attribute. You will then need to add the twitter:image0:src value for the name attribute in-order to tell Twitter's web crawler to expect the first image to be displayed in the tweet that will represent the first image from your collection of images from your web pages content. Next you will need to add the content attribute. The content attributes value should be the URL of the first image to be displayed in the tweet representing your collection of images from your web pages content. Twitter suggests that your image for your Gallery Card should have a minimum width of 146px through 800px and a minimum height of 146px through 800px or else Twitter will not create a Gallery Card for your images that have dimensions smaller than its stated minimum width and height. I suggest your image should have a minimum width of 280px and a minimum height of 280px to be on the safe side for your Gallery Card to be created. Your image will not be cropped unless it has an exceptional aspect ratio, in-other words if your image has an extremely large width and or height your image will then be cropped to Twitter's liking. Twitter will retrieve and proxy your image or in-other words Twitter will grab and create a copy of your image in-order to substitute your image so that it can be displayed in the tweets linking to your collection of images from your web pages content on your web site to ensure a high quality of service and SSL security for Twitter's users. Your image should also be less than 1MB in size.

Now for our third required <meta> element we will also need the name attribute and content attribute again. You will then need to add the twitter:image1:src value for the name attribute in-order to tell Twitter's web crawler to expect the second image to be displayed in the tweet that will represent the second image from your collection of images from your web pages content. Next you will need to add the content attribute. The content attributes value should be the URL of the second image to be displayed in the tweet representing your collection of images from your web pages content. Twitter suggests that your image for your Gallery Card should have a minimum width of 146px through 800px and a minimum height of 146px through 800px or else Twitter will not create a Gallery Card for your images that have dimensions smaller than its stated minimum width and height. I suggest your image should have a minimum width of 280px and a minimum height of 280px to be on the safe side for your Gallery Card to be created. Your image will not be cropped unless it has an exceptional aspect ratio, in-other words if your image has an extremely large width and or height your image will then be cropped to Twitter's liking. Twitter will retrieve and proxy your image or in-other words Twitter will grab and create a copy of your image in-order to substitute your image so that it can be displayed in the tweets linking to your collection of images from your web pages content on your web site to ensure a high quality of service and SSL security for Twitter's users. Your image should also be less than 1MB in size.

Our fourth required <meta> element will also need the name attribute and content attribute as well. You will then need to add the twitter:image2:src value for the name attribute in-order to tell Twitter's web crawler to expect the third image to be displayed in the tweet that will represent the third image from your collection of images from your web pages content. Next you will need to add the content attribute. The content attributes value should be the URL of the third image to be displayed in the tweet representing your collection of images from your web pages content. Twitter suggests that your image for your Gallery Card should have a minimum width of 146px through 800px and a minimum height of 146px through 800px or else Twitter will not create a Gallery Card for your images that have dimensions smaller than its stated minimum width and height. I suggest your image should have a minimum width of 280px and a minimum height of 280px to be on the safe side for your Gallery Card to be created. Your image will not be cropped unless it has an exceptional aspect ratio, in-other words if your image has an extremely large width and or height your image will then be cropped to Twitter's liking. Twitter will retrieve and proxy your image or in-other words Twitter will grab and create a copy of your image in-order to substitute your image so that it can be displayed in the tweets linking to your collection of images from your web pages content on your web site to ensure a high quality of service and SSL security for Twitter's users. Your image should also be less than 1MB in size.

And our fifth required <meta> element we will also need the name attribute and content attribute. You will then need to add the twitter:image3:src value for the name attribute in-order to tell Twitter's web crawler to expect the fourth and final image to be displayed in the tweet that will represent the fourth image from your collection of images from your web pages content. Next you will need to add the content attribute. The content attributes value should be the URL of the fourth image to be displayed in the tweet representing your collection of images from your web pages content. Twitter suggests that your image for your Gallery Card should have a minimum width of 146px through 800px and a minimum height of 146px through 800px or else Twitter will not create a Gallery Card for your images that have dimensions smaller than its stated minimum width and height. I suggest your image should have a minimum width of 280px and a minimum height of 280px to be on the safe side for your Gallery Card to be created. Your image will not be cropped unless it has an exceptional aspect ratio, in-other words if your image has an extremely large width and or height your image will then be cropped to Twitter's liking. Twitter will retrieve and proxy your image or in-other words Twitter will grab and create a copy of your image in-order to substitute your image so that it can be displayed in the tweets linking to your collection of images from your web pages content on your web site to ensure a high quality of service and SSL security for Twitter's users. Your image should also be less than 1MB in size.

Another thing to remember is that Twitter's Gallery Card format currently does not support animated gif images.

Our sixth required <meta> element will state your Gallery Cards title. You will of course need to include the <meta> element along with the name attribute and content attribute as well. You will then need to include the twitter:title value for the name attribute in-order to tell Twitter's web crawler to expect a title for your Gallery Cards images. Next you will need to include the content attribute. The content attributes value should be a title describing your Gallery Cards images. Twitter will shorten your title to about 70 characters, so it's best to keep your title short and to the point if possible.

Now for the seventh and final required <meta> element we will again need the name attribute and content attribute. You will then need to add the twitter:url value for the name attribute in-order to tell Twitter's web crawler to expect a URL to your web pages content. Next you will need to add the content attribute. The content attributes value should be the canonical URL of your web pages content. A canonical URL is basically the preferred URL you want your users or search engines to see for the link to your web pages content when you have multiple URLs that are all different pointing to the same web page.

It's important to remember that in-order for your Twitter's Gallery Cards <meta> elements to work you must first apply for the Twitter Gallery Card which is free. The process usually consists of you signing in to your Twitter account and then entering the URL of a web page from your web site containing the Gallery Cards <meta> elements into the Validate & Apply text box. Once your web page has been validated, you can then request for the final approval for your Twitter's Gallery Card. When requesting for the final approval for your Twitter's Gallery Card you will have to provide some basic information about your web site and Twitter account. You then can expect a response within a few weeks or less, but you will usually hear a response within minutes by email when your request has been reviewed. Once approved you will then need to wait for Twitter's web crawler to re-index your web pages meta information in-order to see your Twitter Card in action, which should be about a week or so. Another important thing to remember is that if you want to use other kinds of Twitter Cards you will need to start the process over again of validating and requesting final approval for your Twitter Card each time. You can learn more about Twitter Cards at Twitter's developers web page for Twitter Cards.

On a side note when using the validator from w3.org to validate your code. The values twitter:image0:src, twitter:image1:src, twitter:image2:src and twitter:image3:src for the name attribute will cause an error in your code since the keyword values twitter:image0:src, twitter:image1:src, twitter:image2:src and twitter:image3:src are not registered. But no need to worry the values twitter:image0:src, twitter:image1:src, twitter:image2:src and twitter:image3:src for the name attribute will still work as long as they passed Twitter's validation process everything should be fine even though they will not validate using the validator from w3.org.

Now let me first show you the code by itself for the HTML snippet for customizing and adding multiple images to tweets that link to an image from a collection of images from your web page using the <meta> elements. And then I will show you how to code and where to place the HTML snippet for both HTML5 and XHTML5.

Here is the HTML code snippet below to customize and add multiple images to tweets that link to an image from a collection of images from your web page using the <meta> elements.


<meta name="twitter:card" content="gallery" />
<meta name="twitter:image0:src" content="http://www.example.com/a-link-to-an-image-representing-your-web-pages-content-1.jpg" />
<meta name="twitter:image1:src" content="http://www.example.com/a-link-to-an-image-representing-your-web-pages-content-2.jpg" />
<meta name="twitter:image2:src" content="http://www.example.com/a-link-to-an-image-representing-your-web-pages-content-3.jpg" />
<meta name="twitter:image3:src" content="http://www.example.com/a-link-to-an-image-representing-your-web-pages-content-4.jpg" />
<meta name="twitter:title" content="A title describing your Gallery Cards images" />
<meta name="twitter:url" content="http://www.example.com/the-preferred-link-to-your-web-pages-content.htm" />

Here is the HTML code snippet to customize and add multiple images to tweets that link to an image from a collection of images from your web page using the <meta> elements for HTML5 in the example below.


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
 <meta name="twitter:card" content="gallery">  
 <meta name="twitter:image0:src" content="http://www.example.com/some-image-1.jpg">  
 <meta name="twitter:image1:src" content="http://www.example.com/some-image-2.jpg">  
 <meta name="twitter:image2:src" content="http://www.example.com/some-image-3.jpg">  
 <meta name="twitter:image3:src" content="http://www.example.com/some-image-4.jpg">  
 <meta name="twitter:title" content="Examples Of The Gallery Card In Action">  
 <meta name="twitter:url" content="http://www.example.com/twitter-gallery-card.htm">  
</head>
<body>
  
 <p>Tweets that link to an image on your web page using the Gallery Card will now display 4 different images within the tweet.</p>  

</body>
</html>

And here is the HTML code snippet to customize and add multiple images to tweets that link to an image from a collection of images from your web page using the <meta> elements for XHTML5 in the example below.


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
 <meta name="twitter:card" content="gallery" />  
 <meta name="twitter:image0:src" content="http://www.example.com/some-image-1.jpg" />  
 <meta name="twitter:image1:src" content="http://www.example.com/some-image-2.jpg" />  
 <meta name="twitter:image2:src" content="http://www.example.com/some-image-3.jpg" />  
 <meta name="twitter:image3:src" content="http://www.example.com/some-image-4.jpg" />  
 <meta name="twitter:title" content="Examples Of The Gallery Card In Action" />  
 <meta name="twitter:url" content="http://www.example.com/twitter-gallery-card.htm" /> 
</head>
<body>

 <p>Tweets that link to an image on your web page using the Gallery Card will now display 4 different images within the tweet.</p>  

</body>
</html>

Article Tags

Tag Article (Sign in if you want to tag this article.)

Share This Article

Send To Facebook Link

Tweet This Link

Send To LinkedIn Link

Send To StumbleUpon Link

Digg This Link

Send To Google Plus One Share Link

Send To Reddit Link

Send To Tumblr Link

Send To Delicious Link

Send To FriendFeed Link

Send To Diigo Link

Email Link

AddThis Link

0 Comments

Leave Comment (Sign in and be the first to comment on this article.)

Important

This site cannot guarantee the accuracy of articles, comments, answers and other types of content or media submitted by members or anonymous users and guests, and we recommend that you use common sense when following any advice or information found on this site. Read our full Content Disclaimer Agreement for further information.