In this post, I am going to tell you that How to Add twitter Cards to your WordPress and Blogger blog Correctly with proper meta tags integration. As you all knows recently Twitter has announced twitter cards to its site. Twitter says, Twitter cards make it possible for you to attach media experiences to Tweets that link to your content. Simply add a few lines of HTML to your webpages, and users who Tweet links to your content will have a “card” added to the Tweet that’s visible to all of their followers. So here is the method to add a “View/Hide Summary” link below our tweets. If anyone clicks the summary link it will expand and show the post description snippet, along with a thumbnail image, Page title and twitter account attribution etc.
To see the demo, visit our twitter page: @BloggingWays
How to Add/Enable Twitter Card for WordPress:
In WordPress blog, one can add twitter cards by 2 methods mentioned below:
Method #1. Install WordPress SEO by Yoast Plugin and then
1. Go to the SEO Options (should be at the bottom, left of your admin panel) > Social.
2. Find the Twitter Section at the bottom and add your Twitter username.
3. Check under “Users” that your WordPress profile has your Twitter account @handle, not the full URL. You are good to go now!
Method #2. JM Twitter Cards– Now do this all thing by just installing a WP plugin and then configuring your twitter username in its settings!
How to Add/Enable twitter Cards in Blogger:
To Correctly add twitter cards in your blogger blog, just follow these easy steps below.
- Go To Blogger > Template > click Edit HTML
- Paste the following Meta tags anywhere below <head>
<!– Twitter Cards For Blogger by BW –>
<meta content=’summary’ name=’twitter:card’/>
<meta content=’@bloggingways‘ name=’twitter:site’/>
<meta content=’@bloggingways‘ name=’twitter:creator’/><b:if cond=’data:blog.pageType == "index"’>
<meta expr:content=’data:blog.url’ name=’twitter:url’/>
<meta expr:content=’data:blog.pageTitle’ name=’twitter:title’/>
<b:else/>
<meta expr:content=’data:blog.homepageUrl’ name=’twitter:url’/>
<meta expr:content=’data:blog.pageName’ name=’twitter:title’/>
</b:if><b:if cond=’data:blog.metaDescription != ""’>
<meta expr:content=’data:blog.metaDescription’ name=’twitter:description’/>
</b:if><b:if cond=’data:blog.postImageThumbnailUrl’>
<meta expr:content=’data:blog.postImageThumbnailUrl’ name=’twitter:image’/>
<b:else/>
<meta content=’YOUR-BLOG-LOGO‘ name=’twitter:image’/>
</b:if>
<meta expr:content=’data:blog.homepageUrl’ name=’twitter:domain’/>
Now Make these changes:
- Replace bloggingways with your twitter username for blog profile
- You can replace bloggingways with either your personal twitter profile or your blog profile. I chose blog profile. For Multi author blogs like in wordpress you can choose to show author twitter profile for each twitter card etc.
- Lastly Replace YOUR-BLOG-LOGO with your own Logo Link.
That’t it! Save your template and you are all done!
Final Step: Apply to Participate
The final step is to verify your twitter card settings. It is really easy, just follow these steps:
- Go to Twitter Card Validator and login your twitter account
- Double Click Summary on the popup window
- Click the Validate and Apply tab
- Well to see you have added the code correctly, just enter your homepage link inside the box and hit go.
- after you see all things in green/red, simply click it and fill up the form to submit your request for Twitter card approval.
Note– You will get approval within 2 hours guaranteed!
Congratulations you have successfully integrated twitter Cards for your Website! Enjoy…
Learn the correct method to integrate Twitter Cards on WordPress and Blogger with expert guidance from Blogging Ways. Elevate your social media presence and engagement effortlessly. Don’t miss out, get started now!
Audio Technica is a well-known brand offering well-built, long-lasting headphones at a very affordable price point. It is a Japanese company that manufactures