HTML5 Snippets - Add A Title To Your Customized Tweets That Link To Your Images Web Page Using The <meta> Element Cover Image

HTML5 Snippets - Add A Title To Your Customized Tweets That Link To Your Images Web Page Using The <meta> Element

Published:

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

Article Details

Views: 577

First Published:

Word Count: 1544

Edition: 1

Now if you want to add a title to your Photo Cards image that represents your web pages content that you or someone else has tweeted a link to. Then all you have to do is add one more additional <meta> element to your Photo Cards 3 required <meta> elements, which I explained about in an earlier tutorial that was published called "HTML5 Snippets - Customize Tweets That Link To Your Images Web Page Using The <meta> Element". Just in case you didn't read the tutorial I will explain about the Photo Cards 3 required <meta> elements to you again after I explain on how to add the <meta> element that will state a title for your Photo Cards image. You may also be interested on how to specify your Photo Cards images width and height to more accurately preserve the aspect ratio of your image for your Photo Card, which you can learn more about in an earlier tutorial that was published called "HTML5 Snippets - Specify The Width And Height Of The Image For Your Customized Tweets That Link To Your Images Web Page Using The <meta> Element".

In-order to state your Photo Cards title you will 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 Photo Cards image. Next you will need to include the content attribute. The content attributes value should be a title describing your Photo Cards image. 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 if you do not want to have a title for your Photo Card simply leave out the title <meta> element or you can leave the content attributes value empty, for example, content="" in-order for a title not be displayed with your Photo Card. The Photo Card format is the only type of Twitter Card which supports an empty title or in-other words a blank title for the content attributes value.

Now that you know how to specify the title for your Photo Cards image. You will now need to add the 3 required <meta> elements that your Photo Card requires 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 add 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 add the content attribute. The content attribute should have the value of photo in-order to tell Twitter's web crawler that you would like to use Twitter's Photo 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:image value for the name attribute in-order to tell Twitter's web crawler to expect an image that will represent your web pages content. Next you will need to add the content attribute. The content attributes value should be the URL of the image to be displayed front and center of the tweet representing your web pages content. Your image should have a minimum width of 280px and a minimum height of 150px. Twitter will not create a Photo Card for images that have dimensions smaller than 280px x 150px. 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 tweeted links to your images web page 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.

Twitter will resize your image all while maintaining the original aspect ratio of your image to fit the following sizes listed below.

  • Web Browsers: maximum height of 375px, maximum width of 435px.
  • Mobile Browsers (with non-retina displays): maximum height of 375px, maximum width of 280px.
  • Mobile Browsers (with retina displays): maximum height of 750px, maximum width of 560px.

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

Now for the third 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 Photo Cards <meta> elements to work you must first apply for the Twitter Photo 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 Photo 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 Photo Card. When requesting for the final approval for your Twitter's Photo 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.

Now let me first show you the code by itself for the HTML snippet for adding a title to your customized tweets that link to your images 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 add a title to your customized tweets that link to your images web page using the <meta> elements.


<meta name="twitter:card" content="photo" />
<meta name="twitter:title" content="A title describing your Photo Cards image" />
<meta name="twitter:image" content="http://www.example.com/a-link-to-an-image-representing-your-web-pages-content.jpg" />
<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 add a title to your customized tweets that link to your images 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="photo">  
 <meta name="twitter:title" content="Image Of A Tweet Using Twitter's Photo Card Format">  
 <meta name="twitter:image" content="http://www.example.com/some-image.jpg">  
 <meta name="twitter:url" content="http://www.example.com/twitter-photo-card-with-a-title.htm">  
</head>
<body>
  
 <p>Your Photo Card should now have a title.</p>  

</body>
</html>

And here is the HTML code snippet to add a title to your customized tweets that link to your images 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="photo" />  
 <meta name="twitter:title" content="Image Of A Tweet Using Twitter's Photo Card Format" />  
 <meta name="twitter:image" content="http://www.example.com/some-image.jpg" />  
 <meta name="twitter:url" content="http://www.example.com/twitter-photo-card-with-a-title.htm" />  
</head>
<body>

 <p>Your Photo Card should now have a title.</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.