Riasmart Technology: How to Automatically Show Blogger Image in Twitter Post?

If you want to share a web page article on Twitter, just copy and paste the page URL to tweet it. When you tweet a URL, the Twitter post should show the first image from the web page, along with the title and a short summary displayed under the image in the Twitter post, that is called Twitter Card. It is supposed to work this way, but unfortunately, not always.

When you put a URL to tweet, it may just show to URL but nothing else. This is likely to happen when you copy and paste to tweet URL from your Goggle blogger site that you want to promote in Twitter. Thus, you wonder, why the image from my blogger does not show in Twitter post?

In fact, many questions had been asked regarding displaying images in Twitter, - how to show image and summary automatically when tweeting a URL? how to display an image in Twitter post from a website page? how to include the image automatically when tweeting an article? All the questions pertains to the Twitter Card.

Twitter Card

The image along with the text summary below the image is the so-called "Twitter Card" that built by the internal Twitter rendering engine. Some special codes must exist in the <head> section of your web page in order to allow Twitter to automatically create the Card when you tweet a URL.

For example, when you copy and paste a URL to tweet a web page from The Atlantic site, the image is automatically included in the Twitter post (see image above), that is because the web page has the following Twitter Card code in the <head> section of the HTML. If you view the source code of the page and search for "twitter:card" then you will see the code like:

<meta name="twitter:site" content="@theatlantic" />
<meta name="twitter:domain" content="theatlantic.com" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image:src" content="https://cdn.theatlantic.com/assets/media/img/mt/2018/04/GettyImages_131271020-1/facebook.jpg?1523571206" />

The above codes help Twitter to generate the image and summary (Twitter Card) on your Twitter post.

Twitter documentation listed several cards such as:

twitter:card
twitter:site
twitter:title
twitter:image
twitter:image:alt

Among them, only twitter:card and twitter:title are required; others are optional.

Validate Twitter Card

If you don't see the image and summary in Twitter post when you copy and past to tweet a URL of your blogger page, it is likely you don't have the Twitter card codes on your blogger site. Twitter provides a validation tool for checking if the card codes are in place and valid. Start the tool from the following site and add your page's URL to check:

https://cards-dev.twitter.com/validator

If the Twitter card does not exist or is invalid, the error message shows such as "Unable to render Card preview" and "ERROR: No card found (Card error)" as seen in the screenshot above.

In this case, when you tweet the URL from this site, Twitter will just show the URL in the post, - no image, no summary, that is, without Twitter card:

If you want your web page to show Twitter card automatically in Twitter post when the page URL is tweeted, then you need to add Twitter Card code to your website.

Add Twitter Card to Google Blogger

Twitter provides code standards for adding Twitter Card to the posting. Although Twitter states that two codes are required: twitter:card and twitter:title, for Blogger, it works by just adding one line to the template html code:

<meta name="twitter:card" content="summary_large_image" />

To add Twitter Card in Google blogger, go to Blogger admin dashboard:
Theme > Edit HTML > find <head> tag > add the following line anywhere between <head> and </head>:

<meta name="twitter:card" content="summary_large_image" />

Click "Save theme" button to save the code change, and check page validation again.

The validation shows the Twitter card (image from the blog with summary below the image) and message indicating the card generation is successful:

INFO: Page fetched successfully
INFO: 10 metatags were found
INFO: twitter:card = summary_large_image tag found
INFO: Card loaded successfully

Then, when tweeting the blogger page URL, the Twitter post does show the Twitter Card (image and summary):

Two Types of Twitter Cards

There are two types of Twitter Cards: Summary Card and Summary Card with Large Image:

The Summary Card can be used for many kinds of web content, from blog posts and news articles, to products and restaurants. It is designed to give the reader a preview of the content before clicking through to your website. The Summary Card is coded by the following line:

<meta name="twitter:card" content="summary" />

When the Summary Card is specified, the image is shown as a small thumbnail on the left side with the title and summary on the right side. The following Twitter card validation show how a summary card is displayed.

Twitter provided sample code for Summary Card as:

The Summary Card with Large Image features a large, full-width prominent image alongside a tweet. It is designed to give the reader a rich photo experience, and clicking on the image brings the user to your website.

Twitter provided sample code for Summary Card with Large Image as:

The Summary Card with Large Image is the mostly used Twitter Card.

More on Twitter Card Coding

More Twitter card properties are often used to control the context and presence of Twitter Card display. Check the source of websites such as medium.com, inc.com, wired.com, and more, you will see they use more than one Twitter Card codes.

The sample codes above do not work for Google Blogger, because there are specific tags and variables used in blogger themes. For Google blogger, the following codes specify more properties of Twitter Card:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@noeticmind" />
<meta name="twitter:creator" content="@noeticmind" />
<meta property="og:url" expr:content='data:blog.url' />
<meta property="og:title" expr:content='data:blog.pageName' />
<meta property="og:description" expr:content='data:blog.metaDescription' />
<meta property="og:image" expr:content='data:blog.firstImageUrl' />

Note the the org: and expr: are needed to make the variables rendered. However, the one line twitter:card can just make Twitter Card work for Blogger.

Once the twitter:card is added to the Blogger theme HTML customization, you can share a blog page URL on Twitter to have the image and summary displayed automatically on Twitter post.

Tweeting from Tools

Twitter Card should work indifferently by tweeting the URL directly or using tools such as SocialBee, Planable, and PromoRepublic. When you use one of the tools, the image and summary are usually shown within the tool interface whether or not the Twitter Card is set on the web page. However, when you post it from the tool, the actual image will only shown on Twitter post if the Twitter Card is set.

Also, some tools may mess up between the Summary Card and Summary Card with Large Image. For example, web pages of New York Times are set as Summary Card with Large Image. The view source shows it has the "<meta name="twitter:card" value="summary_large_image" />" code, and the Twitter Card validation confirms that the summary_large_image is found. But when the URL of the page is tweeted from Planable, the actual Twitter post shows the Summary Card, and the image is also different from the one shown in Twitter Card Validator. I know this issue is caused by the tool, Planable, because when I delete the tweet posted from Planable and tweet the URL directly from Twitter, the post just shows the Summary Card with Large Image.

Resources

Twitter Card Validator
https://cards-dev.twitter.com/validator

About Twitter Cards
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards

Optimize Tweets with Cards
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image

Twitter Cards Forum
https://twittercommunity.com/c/publisher/cards

Riasmart Technology

Pages

How to Automatically Show Blogger Image in Twitter Post? - Tricks of Twitter Card

No comments:

Post a Comment