How To Post a Link on Twitter With Image | AUTO POST RSS FEED | RSS |
Posted: 2015-10-05

Twitter Card META Tags

There are three types of Twitter Cards:  summary, photo, and video.  The summary Twitter Card is for articles and text-based content, while photo and video cards are self-explanatory  (YouTube uses the video card type, for example).  There are a few META tags used for all card types, then a few more that are card-type-specific.  All META tag name attributes are prefixed with twitter:.

Generic META Tags

META tags you would use in all card cases include:

  • twitter:card – The type of card to be created: summary, photo, or video.
  • twitter:url – The URL that should be used for the card.  This will likely be the same URL as the page’s canonical link.
  • twitter:title – The title as it should display in the Twitter Card.
  • twitter:description –  A 200 character summary of the content at the given URL.
  • twitter:image – A representative image URL for the content.  In many cases, simply providing your logo’s URL will be just fine.

Each of these items get their own META tag, so  the Twitter Card META tags for this page would look like this preview:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="How To Post a Link on Twitter With Image">
<meta name="twitter:description" content="How To Post a Link on Twitter With Image.">
<meta name="twitter:image:src" content="">
Source code for WordPress tags for Twitter for show image like link at posts.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="<?php echo get_permalink($ID); ?>">
<meta name="twitter:title" content="<?php echo get_the_title($ID); ?>">
<meta name="twitter:description" content="<?php echo mb_substr($content,0,120); ?>">
<meta name="twitter:image:src" content="<?php $ID = $wp_query->post->ID; $image = wp_get_attachment_image_src( get_post_thumbnail_id( $ID ),'full'); echo $image[0]; ?>">