Software, your way.
How To Get Good Custom Software
(Download)
(PDF)
burger menu icon
WillMaster

WillMaster > LibraryGenerators and Converters

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

Twitter Card Meta Tags Generator

If you use Twitter, you're familiar with image tweets. These are tweets with an image below the text of the tweet.

They're called Twitter Cards.

When a tweet links to a web page, the Twitter bot scans the web page to find the code for publishing the Twitter Card. If it's found and it validates, a Twitter Card is published along with the tweet.

This article has a generator to create that code for you — so you can publish your own Twitter Cards. (Twitters Getting Started Guide is a wonderful resource for learning about Twitter Cards.)

For the generator, all you need is your Twitter id (@username), an image URL, and the image title and description.

Actually, an image is optional. If no image URL is provided, a title and description are still required. In the case of no image or an invalid image URL, Twitter will use a placeholder icon for the image.

For a live Twitter Card demonstration, click the "Tweet this" link inside the pull quote further above. When tweeted, an image for the article will show up with the tweet in your feed.

The generator provides copy and paste code for either of two types of Twitter Cards:

  1. Summary — The image is square (if the image you provide isn't square, it will be cropped to make it square). The image publishes on the left of the content you provide for the image.

  2. Summary with Large Image — The image is rectangular and extends across the tweet area. The content is published below the image. The Twitter Card validator can be used to see what the image looks like.

The maximum file size for images is 1 megabyte. The minimum image size for the summary card is 120 pixels on each side and the minimum image size for the summary card with large image is 280 pixels wide and 150 pixels high.

With the code provided by the generator, your image will automatically appear each time a tweet is made that links to your webpage.

Here is the generator. Use it to generate the code for your own Twitter Cards. The generated code is put into the HEAD area of your web page.

Twitter Card Meta Tags Generation Form

Card Type.

"Summary" — square image on left with text on its right.

"Summary Card with Large Image" — full width rectangular image with text below it.

Twitter @username of website.

Title of content (max 70 characters).

Description of content (maximum 200 characters).

URL of image to use in the card (under 1MB in size).

(Optional) A text description of the image conveying the essential nature of an image to users who are visually impaired.

Bookmark this page to use the generator for learning what Twitter Card meta tags to use and the information they require. Here is documentation for the two types of cards.

You can now publish images on your Twitter feed, either of two types of Twitter Cards.

(This article first appeared in Possibilities ezine.)

Will Bontrager

Was this article helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method

All information in WillMaster Library articles is presented AS-IS.

Support Area – Ask Your Question Here

The "Code in articles help" forum at the Willmaster.com support area is the place to get information about implementing JavaScript and other software code found on Willmaster.com

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List
software index page

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2024 Will Bontrager Software LLC