We all know that twitter is the best social media platform to get connected with your followers and to drive huge traffic towards your post, not only twitter but facebook, google+ etc... are also important.
For example,
As a blogger, you have made a website and wrote an amazing post or article. Now you heard somewhere that social media platform will help you to get more traffic to your site. so you made twitter account for your site and now you wanted to share your article, so you copied link of that article and just tweeted it, and thinking that your tweet will show image,title,description from your article, but what you see is just a link which you have pasted, nothing more nothing less. Now you wondering that why this happed? why image,title won't showed up? and then you acted like smart, you deleted your tweet and again pasted your link and tweeted it thinking that this time it will show everything, but this time also you see that god damn link.
After trying your best, finally you came to google and searching like why my twitter post doesn't show image/title? how to show image/article title on twitter post? etc... So, if you are here then you are at the right place because you will get solution of your problem in this article.
READ - 🔗 Add Facebook Open Graph Meta-Tags To Blogger/Wordpress
For example,
As a blogger, you have made a website and wrote an amazing post or article. Now you heard somewhere that social media platform will help you to get more traffic to your site. so you made twitter account for your site and now you wanted to share your article, so you copied link of that article and just tweeted it, and thinking that your tweet will show image,title,description from your article, but what you see is just a link which you have pasted, nothing more nothing less. Now you wondering that why this happed? why image,title won't showed up? and then you acted like smart, you deleted your tweet and again pasted your link and tweeted it thinking that this time it will show everything, but this time also you see that god damn link.
After trying your best, finally you came to google and searching like why my twitter post doesn't show image/title? how to show image/article title on twitter post? etc... So, if you are here then you are at the right place because you will get solution of your problem in this article.
READ - 🔗 Add Facebook Open Graph Meta-Tags To Blogger/Wordpress
What is Twitter Card Meta-Tags?
Twitter card meta-tags are just simple HTML code which we have to add in our website to take control over how our post will going to be look like when we share any url from our site on twitter.
If your website have twitter Meta-Tags then whenever you share any url from your site, twitter will try to fetch information from that url and it will show images,title,description etc... according to that url.
Types of Twitter Cards
- Summary card - Default card, including a title, description, thumbnail, and Twitter account attribution.
- Summary with large image - The Summary Card with Large Image features a large, full-width prominent image alongside a tweet. It is designed to give the reader a rich photo experience, and clicking on the image brings the user to your website.
- Gallery card - A Tweet card geared toward highlighting a collection of photos.
- Player card - A Tweet sized video/audio/media player card.
- App card - A Tweet card for providing a profile of an application.
- Product card - A Tweet card to better represent product content.
Adding Twitter Card Meta-Tags To Blogger
To add twitter cards to your site you just have to add below code in your site's HTML.
You have to add code between,
<head>
add here
</head>
I recommend you to add just above </head> so that things don't get messed up.
-------------------------------------
<!-- Twitter Card Tags Start-->
<meta content='summary_large_image' name='twitter:card'/>
<!-- Title, URL & Description -->
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta content='YOUR-SITE-NAME' name='twitter:title'/>
</b:if>
<meta expr:content='data:blog.url' name='twitter:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<!-- Image -->
<b:if cond=' data:blog.postImageUrl'>
<meta expr:content=' data:blog.postImageUrl' name='twitter:image'/>
<meta content='800' property='twitter:image:width'/>
<meta content='418' property='twitter:image:height'/>
</b:if>
<!-- Twitter specific -->
<meta content='@YOUR-SITE-NAME' name='twitter:site'/>
<meta content='@TWITTER-ACCOUNT-NAME' name='twitter:creator'/>
<!-- Twitter Card Tags Ends-->
<meta content='summary_large_image' name='twitter:card'/>
<!-- Title, URL & Description -->
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta content='YOUR-SITE-NAME' name='twitter:title'/>
</b:if>
<meta expr:content='data:blog.url' name='twitter:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<!-- Image -->
<b:if cond=' data:blog.postImageUrl'>
<meta expr:content=' data:blog.postImageUrl' name='twitter:image'/>
<meta content='800' property='twitter:image:width'/>
<meta content='418' property='twitter:image:height'/>
</b:if>
<!-- Twitter specific -->
<meta content='@YOUR-SITE-NAME' name='twitter:site'/>
<meta content='@TWITTER-ACCOUNT-NAME' name='twitter:creator'/>
<!-- Twitter Card Tags Ends-->
--------------------------------------
Things To Be Replaced
1. YOUR-SITE-NAME - Here enter your site name or blog name.(for example 🔗 TheStep4U)
2. TWITTER-ACCOUNT-NAME - Enter your twitter account name.(for example 🔗 TheStep4U)
Now save your HTML Theme and you are done.
If you want to see preview of your post then go to 🔗 Card Validator and enter any url for which you want to see preview and then click on preview card.
If you have any query, then please do comment and let me know.
READ - 🔗 How To Use Dynamic Lock Feature In Windows 10
I HOPE THIS INFORMATION WILL HELP YOU.
ENJOY...ENJOY...ENJOY...
No comments:
Post a Comment