Twitter Card For Blogger That Works!
Make Those Tweets Count By Making Those
Images Linked To Your Website
I've had a day of frustration trying to get the Twitter Summary Card to work for me on Blogger. Everyone else get's to enter it with such ease but no it's a struggle for Blogger. I tried many different codes and methods but something always didn't work!
On the Twitter Website the code the provide is for one post. I don't want it for one post! I want it to work for all my posts. Plus their website alone is very vague on how to properly insert the code.
In the end I found combining two separate codes finally had it working on my Blogger. I know each Blog is unique but I'll share what worked for me and if you had issues with it please message me and I'll try to find a way to resolve your issue.
All the code I will be giving you will have to be inserted in your HTML. I know the HTML area can be scary and like all websites suggest you are better off saving your template before moving on. So off we go to template.
xmlns:og='http://ogp.me/ns#'
So first step BACK UP!
Next into the world of EDIT HTML
Right when you enter the HTML you'll be at the header. You should see this code xmlns used a few times. You'll have to enter this code to the end of that string.
xmlns:og='http://ogp.me/ns#'
Make sure to add it before the greater than sign > This has to be at the end of your code. Should look something like this.
xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>
<head>
Hit save! Hopefully no errors. If you do get any please make sure these are correctly placed exactly like mine ' >
You need to do a search in the HTML Click somewhere in the HTML area and now do this which should bring up a search window.
PC
Hold down ctrl, select F
Mac
Hold down command, select F
Search </head>
The big part of the code you will be entering will be just over </head>
The big part of the code you will be entering will be just over </head>
<!-- Open Graph Meta Tags Plus Twitter Tag BEGIN --> <meta expr:content='data:blog.pageName' property='og:title'/> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/> </b:if> <meta expr:content='data:blog.title' property='og:title'/> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' property='og:description'/> </b:if> <meta content='summary_large_image' name='twitter:card'/> <meta content='@AwkwardBloggest' name='twitter:site'/> <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'/> <meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/> <b:else/> <meta expr:content='data:blog.homepageUrl' name='twitter:url'/> <meta expr:content='data:blog.pageTitle' name='twitter:title'/> <meta content='Image URL' name='twitter:image:src'/> </b:if> <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' name='twitter:description'/> </b:if> <meta expr:content='data:blog.canonicalUrl' name='twitter:url'/> <!-- Open Graph Meta Tags Plus Twitter Tag END -->
The read parts of this code are the only one's you'll have to change.
This one you will have to change to your own Twitter account one @AwkwardBloggest
summary_large_image This is the part of the code that caused all the extra work
With summary_large_image Your Tweet will look something like this:
If you remove_large_image and have it as just summary Your Tweet will look something like this:
You can always change your option when ever you like. Now it's time to hit save and hope for the best! I hope you had no issues. If everything saved with no issues you have one more thing to do.
You'll have to go to Twitter Card Validator
Input a Url for one of your posts. For Example: URL To My Post I used On The Images
If Twitter Validated your url with no issues you're done.........well maybe.
This all depends on if your post template has a Description Area on the right hand side. The description area is where you enter the text you want to show up on your Tweet.
If you are missing this feature (which you should of had anyway for search engines) you need to go to Settings - Search Description
Meta tags Description needs to be enable so select Edit
In that area you should now write a description about your blog and save. This will activate Search Descriptions in your post.
I tried to cover everything and I do hope in the end everything works for everyone. If you need any other tips for your Blogger I have a few posts Under HTML??? on my homepage.
Let me know if this worked for you. I love getting feedback.
I will be writing about adding these tags for Pinterest later this week.
I am disappointed that expand summary still needs to be applied to these. This is only computers since for the app version of Twitter the Tweets are fully expanded.
I will be writing about adding these tags for Pinterest later this week.
I am disappointed that expand summary still needs to be applied to these. This is only computers since for the app version of Twitter the Tweets are fully expanded.
0 comments :