Twitter Meta Tags for Blogger

I realize I don't talk about tech stuff all that much, but as you may have noticed, I did a pretty big overhaul of my Blogger site recently. It's been a challenge migrating away from Wordpress, particularly when it comes to plugins to enrich the aesthetic of the site.

Something that I feel very strongly about is engagement on social media. A big part of that is Twitter for me, and when I share links to my content I want to encourage people to click through by having Twitter summary cards included in the tweets. It shows it's not spam, that there is a media-rich experience on the other end of the link, and that the site cares about presentation. I also hear it's good for SEO, and who doesn't want to have good SEO things?

I tried a few solutions for integrating automatically-populated Twitter meta tags into my profile (meaning, each post would be able to generate a unique set of Twitter meta tags to fulfill the needs for the summary cards), but for some reason it wasn't pulling an image. I'm not sure if it was a parsing error or some kind of formatting issue, but it was driving me batty.

A few Google searches brought me here, where another web developer was having a similar issue. He was using large image summary cards but the image wasn't working. It turns out that Twitter themselves have finally come up with their own guidelines for integrating meta tags natively in different CMSs.

The only thing I found lacking was the missing twitter:creator and twitter:domain tags, but that was easily fixed by adding them myself:

You'll also notice that the twitter:card value was changed from photo in the example to summary_large_photo in my coding. I had been using a standard summary card but having a bigger image is just so much prettier than the tiny thumbnail.

When I was adding the tags I tried experimenting with the description conditions, to see if it could pull from the search description field in a Blogger post rather than pulling a snipit. As soon as I did the image stopped showing up in the tag, so I have a feeling the twitter:description conditions of other guides to implementing Twitter meta tags in Blogger templates may have been the culprit. I'm not sure why, but it's the only variable I found that impacted the function of pulling the image into the Twitter card.

The result?

If it runs through the validator and creates the right type of summary (like the above) the code is working.

For anyone interested in copy-pasta, here you go:

<!-- Twitter Meta Tags -->
<meta content='@emilyooo' name='twitter:site'/>
                <meta content='http://www.sportsandstitches.com' name='twitter:domain'/>
                <meta content='@emilyooo' name='twitter:creator'/>
<b:if cond='data:post.firstImageUrl'>
   <meta content='summary_large_image' name='twitter:card'/>
   <meta expr:content='data:post.firstImageUrl' name='twitter:image'/> 
<b:else/>
   <meta content='summary' name='twitter:card'/>
   <b:if cond='data:blog.postImageThumbnailUrl'>
      <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/> 
   </b:if>
</b:if>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <meta expr:content='data:post.snippet' name='twitter:description'/>
<b:else/>
  <meta content='Sports &amp; Stitches: nerd life in Austin' name='twitter:description'/>     
</b:if>
<!-- End Twitter Meta Tags -->

Just make sure you replace the highlighted spots with the correct stuff for you and your site.