Blogger: Twitter Card image display problem solution

blogger
#1

After struggling with this issue for a several days, I finally came up with some code that works. So I want to share it in case anyone else is having the same problem.

What this code does is it first looks to see if your post has an image associated with it and uses that image in the card, but if the post doesn’t have an image, it will take one you pointed to (a portrait, avatar, logo, whatever you chose) and use that image instead as a default image. (I think it works best to use a default image that is also hosted on Blogger, as I did in my example code below.)


STEP 1. You have to enable Custom robots.txt under Settings > Search preferences
and enter the following code:

User-agent: Twitterbot
Disallow:

It looks like this:

image.png875×374 22.7 KB


**STEP 2.** Go into **Template > Edit HTML** and add the following code somewhere between the <HEAD></HEAD> tags. I put my code just before the closing </HEAD> tag, 
    <!--START Twitter Card -->
    <meta content='summary' name='twitter:card'/>
    <meta content='@GamlynHealth' name='twitter:site'/>
    <meta content='@GamlynHealth' name='twitter:creator'/>
    <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
       <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
          <meta expr:content='data:blog.pageName' name='twitter:title'/>
       <b:else/>
          <meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
          <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
       </b:if>
       <b:if cond='data:blog.postImageUrl'>
          <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
       <b:else/>
          <meta content='https://2.bp.blogspot.com/-N_wFZINMSXU/WK27tpP4sTI/AAAAAAAAAMQ/VbQh6GoHk9sZEtIy2kMC-3K2BO7JUgP6gCK4B/s113/dgamlyn-blog-author-gamlynhealth-300x300.png' name='twitter:image'/>
       </b:if>
       <b:if cond='data:blog.metaDescription'>
          <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
       </b:if>
    <!--END Twitter Card -->

You need to change three things in your implementation:
1. ‘twitter:site’ - Use your own account, such as @YOURACCOUNT
2. ‘twitter:creator’ - Use your own account, such as @YOURACCOUNT
3. ‘twitter:image’ - Where I have a long URL path above, put in your own image URL path. (That’s the one that points to the default image.)

To be very clear, I’m talking about this ‘twitter:image’ instance:

       <b:else/>
          <meta content='https://2.bp.blogspot.com/-N_wFZINMSXU/WK27tpP4sTI/AAAAAAAAAMQ/VbQh6GoHk9sZEtIy2kMC-3K2BO7JUgP6gCK4B/s113/dgamlyn-blog-author-gamlynhealth-300x300.png' name='twitter:image'/>
       </b:if>

The code renders in the page something like this: 
<!-- START Twitter Card -->
<meta content='summary' name='twitter:card'/>
<meta content='@GamlynHealth' name='twitter:site'/>
<meta content='@GamlynHealth' name='twitter:creator'/>
<meta content='http://www.gamlynhealth.com/' name='twitter:domain'/>
<meta content='http://www.gamlynhealth.com/2017/02/how-to-get-started-first-steps-and-some.html' name='twitter:url'/>
<meta content='How to get started: first steps and some meal ideas' name='twitter:title'/>
<meta content='https://2.bp.blogspot.com/-Pv6_eQV79cI/WKiwQArdqtI/AAAAAAAAAKs/C92a525-pOUDUeg7iIVAaCF2GXkCl9MOQCLcB/s1600/12661973_10153469817332057_4130319714841993980_n_544.png' name='twitter:image'/>
<!--END Twitter Card -->

Give it a try—I hope this info can save you a ton of time troubleshooting and tweaking.
Twitter Card image not show
Unable to render Card preview and WARN: Not whitelisted
#2

Thanks for this useful post that can help others! :+1:

#3

One minor nitpick is that you should use twitter:image instead of twitter:image:src - either will work, but the former is the current correct use of the tag, and the other is just there for compatibility.

#4

Thanks for that tweak, I’ll use twitter:image instead. --I should probably go into the original posting and make the change there so it can be cut-and-pasted as is.

#5

Done. Fixed it in the original posting. Thanks again.

#6

Hello I tried to follow your tips, updating the robots.txt in blogger.

But I tried in the validator, the image is not showing up.
And I found this in the view source html

<!-- twitter cards -->
<meta content='summary' name='twitter:card'/>
<meta content='@emakkucetar' name='twitter:site'/>
<meta content='@emakkucetar' name='twitter:creator'/>
<meta content='http://emakkucetar.blogspot.sg/' name='twitter:url'/>
<meta content='Blog seputar ibu dan anak. Berdasarkan pengalaman pribadi seorang ibu yang merawat sendiri anaknya.' name='twitter:description'/>
<!--Gagal merender nodus tema 'meta'.

The expression 'http://1.bp.blogspot.com/-W-HK3z5xZwc/WLerDc-pP0I/AAAAAAAAAk0/ma5ZxarQ_CATqp07yns29OBBMeQ3IDqKACPcB/s320/emakkucetar_400x400.jpg' is not valid.
-->
<!-- end twitter cards -->

it says it fails to render as the expression of image URL is not valid

do you have any idea why this happens?

#7

It seems like you need to check your Blogger conditional statements that are trying to include the twitter:image value. I’m not an expert but I’m guessing you need something like:

       <b:if cond='data:blog.postImageUrl'>
          <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
       <b:else/>
          <meta content='http://1.bp.blogspot.com/-W-HK3z5xZwc/WLerDc-pP0I/AAAAAAAAAk0/ma5ZxarQ_CATqp07yns29OBBMeQ3IDqKACPcB/s320/emakkucetar_400x400.jpg' name='twitter:image'/>
       </b:if>
#8

Hi @emakkucetar, is it working for you now? If not, could you please post your version of the Blogger template code and I’ll look at it. From the rendered code you provided above, we see that the image-related conditional statements are not returning any values, as you have noted.

closed #9

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.