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:
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 == "item"'>
<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.
