Skip to HeaderSkip to PostSkip to Footer

How to Install SEO Friendly Twitter Card on Blogger

Table of Content

    How to Install SEO Friendly Twitter Card on Blogger - Twitter Card is a meta tag that serves to provide details on links when shared on Twitter or embedded in a tweet. If you've heard of Facebook's Open Graph, then you can say that the Twitter Card has the same function, except that it's specifically for Twitter.

    For more details, this is the result of Ninura's Twitter Card blog when the article link is Tweeted to Twitter.

    Contoh Hasil Twitter Card

    If you are interested in installing it on your blog, please follow this short guide.

    Materials Used

    1. Internet Connection
    2. Google Account
    3. Blogger Blog

    Required Tools

    1. Laptop/ Computer/ Mobile
    2. Notepad

    Estimated Time Required

    Estimated Time Required: 5 Mins.

    Guide

    Step 1 - Copy this meta tag script

    First of all, please copy the script below and put it in your Notepad or Text Editor.

    <b:if cond='data:view.isHomepage'>
    <meta expr:content='data:blog.title' name='twitter:title'/>
    <b:if cond='data:blog.metaDescription'><meta expr:content='data:blog.metaDescription' name='twitter:description'/>
    <b:else/><meta expr:content='data:blog.title + &quot; - &quot; + data:blog.homepageUrl' name='twitter:description'/></b:if>
    <meta expr:content='data:blog.title' name='twitter:image:alt'/>
    <meta content='https://1.bp.blogspot.com/-_UWhBEd5l9E/X7XC1q-fyvI/AAAAAAAAAsM/aAMVvE38FiEKvVpL0GOlFV-L4JkubqkSgCK4BGAYYCw/s0-rw/android-chrome-512x512.png' name='twitter:image'/>
    <b:elseif cond='data:view.isMultipleItems and !data:view.isHomepage'/>
    <meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='twitter:title'/>
    <b:if cond='data:blog.metaDescription'><meta expr:content='data:blog.metaDescription' name='twitter:description'/>
    <b:else/><meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title + &quot; - &quot; + data:blog.homepageUrl' name='twitter:description'/></b:if>
    <meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='twitter:image:alt'/>
    <meta content='https://1.bp.blogspot.com/-_UWhBEd5l9E/X7XC1q-fyvI/AAAAAAAAAsM/aAMVvE38FiEKvVpL0GOlFV-L4JkubqkSgCK4BGAYYCw/s0-rw/android-chrome-512x512.png' name='twitter:image'/>
    <b:elseif cond='data:view.isSingleItem'/>
    <meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='twitter:title'/>
    <b:if cond='data:blog.metaDescription'><meta expr:content='data:blog.metaDescription' name='twitter:description'/>
    <b:else/><meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title + &quot; - &quot; + data:blog.homepageUrl' name='twitter:description'/></b:if>
    <meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='twitter:image:alt'/>
    <b:if cond='data:view.featuredImage'><meta expr:content='data:view.featuredImage' name='twitter:image:alt'/>
    <b:elseif cond='data:blog.postImageUrl'/>
    <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
    <b:elseif cond='data:blog.postImageThumbnailUrl'/>
    <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
    <b:else/>
    <meta content='https://1.bp.blogspot.com/-_UWhBEd5l9E/X7XC1q-fyvI/AAAAAAAAAsM/aAMVvE38FiEKvVpL0GOlFV-L4JkubqkSgCK4BGAYYCw/s0-rw/android-chrome-512x512.png' name='twitter:image'/>
    </b:if>
    <b:elseif cond='data:view.isError'/>
    <meta expr:content='data:messages.theresNothingHere + &quot; - &quot; + data:blog.title' name='twitter:title'/>
    <b:if cond='data:blog.metaDescription'><meta expr:content='data:blog.metaDescription' name='twitter:description'/>
    <b:else/><meta expr:content='data:messages.theresNothingHere + &quot; - &quot; + data:blog.title + &quot; - &quot; + data:blog.homepageUrl' name='twitter:description'/></b:if>
    <meta expr:content='data:messages.theresNothingHere + &quot; - &quot; + data:blog.title' name='twitter:image:alt'/>
    <meta content='https://1.bp.blogspot.com/-_UWhBEd5l9E/X7XC1q-fyvI/AAAAAAAAAsM/aAMVvE38FiEKvVpL0GOlFV-L4JkubqkSgCK4BGAYYCw/s0-rw/android-chrome-512x512.png' name='twitter:image'/></b:if>
    <meta content='summary_large_image' name='twitter:card'/>
    <meta content='@ninuraofficial' name='twitter:site'/>
    <meta content='@ninuraofficial' name='twitter:creator'/>

    Step 2 - Modify the Script According to the Terms

    The next step, please first edit the script that you copied with the following conditions:

    • Yellow: Change the URL of your logo or blog image. If possible, 16:9 Image URL.
    • Blue: Change to the desired card format. You can replace it with one of the options below or stick with the existing format.
      • summary: Card without image thumbnail. Title, description and link only.
      • summary_large_image: Card with thumbnail.
    • Green: Change to your Twitter username.

    Step 3 - Go to Edit HTML

    Step 3 - Go to Edit HTML

    If you have edited the script, please go to Blogger.com. Then please go to the Theme menu and open the Edit HTML menu.

    Step 4 - Put Script Above </head> or Under <head>

    Step 4 - Put Script Above </head> or Under <head>

    Next, please look for the opening tag <head> then paste the modified script just below the tag. Alternatively, look for the closing tag </head> or </head> then place the modified script just above the tag.

    Step 5 - Save Template

    Step 5 - Save Template

    Finally, please save your template and then try to share your article or blog link to Twitter and see if your Twitter Card is working properly.

    Closing

    Actually the script above is just the result of a modification that I made for this Ninura blog. I would not say that this format is the most SEO Friendly or the best in any aspect.

    If possible, if you have another format of Twitter Card, you can share it here.

    Benefit

    Some of the benefits of installing the script:

    • Lightweight - because it uses a conditional tag that is set in such a way that the delivery will not collide or cause an error.
    • Automatic - the script above is already in the settings so you don't have to worry about forgetting to add images manually like a plugin on WordPress.
    • All pages have been covered by this script, even the error page.

    maybe that's all I can say at this time. If something is unclear or you want to add something, please tell us in the comments column below. Thank you, hopefully useful, and see you in my other writings.

    Comments

    Post a Comment

    Please give relevant comments. Dont put irrelevant link on the comment section or I will delete the comment.