HTML5 Snippets - Add A Large Image And Customize The Tweets That Link To Your Articles Web Page Using The <meta> Element Cover Image

HTML5 Snippets - Add A Large Image And Customize The Tweets That Link To Your Articles Web Page Using The <meta> Element

Published:

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

Article Details

Views: 662

First Published:

Word Count: 1662

Edition: 1

Now if you want to add a large image and customize the tweets that link to your web pages content. Well you're in luck, because Twitter will allow you to customize on how the tweeted link will be displayed on its web site to a certain extent. For example, you can give the tweeted links reader a preview of the content of your article as well as display a large image above the title and description of your article before the reader clicks through to your web page. Now in-order to add a large image and customize a tweet that links to your articles web page. 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 Summary Card with Large Image format, which is similar to Twitter's Summary Card format. You can learn more about Twitter's Summary Card in an earlier tutorial that was published called "HTML5 Snippets - Customize Tweets That Link To Your Articles Web Page Using The <meta> Element".

Now in-order to add a large image to your Card. You will need the <meta> element along with the name attribute and content attribute. You will then need to include the twitter:image:src 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 include the content attribute. The content attributes value should be the URL of the image to be displayed with your web pages content. Your image should have a minimum width of 280px and a minimum height of 150px. Images that are smaller than the dimensions of 280px x 150px will not be displayed at all not even as a thumbnail image. In-other words your Card will simply appear without an image at all. Images that have a width or height that is too big will be resized. Your image should also be less than 1MB in size. The image will be displayed as a noticeably large image above the title and description of the Card.

Now that you know how to add a large image to your Card. You will now need to add the Cards 4 required <meta> elements in-order for your Card to work properly. Surprisingly the <meta> element to include the large image is not required. Now the first required <meta> element will require 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 summary_large_image in-order to tell Twitter's web crawler that you would like to use Twitter's Summary Card with Large Image format for your web pages content.

Our second required <meta> element will also need the name attribute and content attribute. You will then need to add the twitter:description value for the name attribute in-order to tell Twitter's web crawler to expect a description for your web pages content. Next you will need to add the content attribute. The content attributes value should be a description that describes your web pages content. You should never re-use the title text as the description for your web pages content. Twitter will shorten your description to about 200 characters.

Now for our third required <meta> element we will need the name attribute and content attribute as well. You will then need to add the twitter:title value for the name attribute in-order to tell Twitter's web crawler to expect a title for your web pages content. Next you will need to add the content attribute. The content attributes value should be a title describing your web pages content. Twitter will shorten your title to about 70 characters, so it's best to keep your title short and to the point when possible.

And for our fourth required <meta> element we will also 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 in layman's terms is 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 Cards <meta> elements to work you must first apply for the Twitter Summary Card with Large Image 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 Summary Card with Large Image <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 Summary Card with Large Image. When requesting for the final approval for your Twitter's Summary Card with Large Image 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 large image and customizing the tweets that link to your articles 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 large image and to customize the tweets that link to your articles web page using the <meta> elements.


<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image:src" content="http://www.example.com/a-link-to-an-image-representing-your-web-pages-content.jpg" />
<meta name="twitter:description" content="A description of your web pages content." />
<meta name="twitter:title" content="A title describing your web pages content" />
<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 large image and to customize the tweets that link to your articles 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="summary_large_image">  
 <meta name="twitter:image:src" content="http://www.example.com/some-image.jpg">  
 <meta name="twitter:description" content="Now if you want to add a large image and customize the tweets that link to your web pages content. Well you're in luck, because Twitter will allow you to customize on how the tweeted link will be displayed on its web site to a certain extent.">  
 <meta name="twitter:title" content="HTML5 Snippets - Add A Large Image And Customize The Tweets That Link To Your Articles Web Page Using The &lt;meta&gt; Element">  
 <meta name="twitter:url" content="http://www.example.com/twitter-summary-card-with-large-image.htm">  
</head>
<body>
  
 <p>Tweets that link to your web pages content should now include a large image and be customized to your liking.</p>  

</body>
</html>

And here is the HTML code snippet to add a large image and to customize the tweets that link to your articles 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="summary_large_image" />  
 <meta name="twitter:image:src" content="http://www.example.com/some-image.jpg" />  
 <meta name="twitter:description" content="Now if you want to add a large image and customize the tweets that link to your web pages content. Well you're in luck, because Twitter will allow you to customize on how the tweeted link will be displayed on its web site to a certain extent." />  
 <meta name="twitter:title" content="HTML5 Snippets - Add A Large Image And Customize The Tweets That Link To Your Articles Web Page Using The &lt;meta&gt; Element" />  
 <meta name="twitter:url" content="http://www.example.com/twitter-summary-card-with-large-image.htm" />  
</head>
<body>

 <p>Tweets that link to your web pages content should now include a large image and be customized to your liking.</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.