Are you looking for showing your website or blog posts with large image? You are in the right place. Twitter posts with large images attract the audience more as compare to the posts with smaller images and as a result you get more clicks on your posts. It is a good way to drive traffic to your blog or website from Twitter.
People often find this very complicated and spend days to show their posts on Twitter with large image and fail, but you don't need to worry anymore, you are only required to add some code in your website's header section. Whether you are using any blogging platform like Blogger, WordPress or you have custom website, this solution works for everyone.
In this tutorial we will guide you step-by-step to How To Show Website Posts On Twitter With Large Image or How Add Twitter Summary Card With Large Image.
Follow the steps:
- In your template/theme find the header. Header starts with <head> tag and ends with </head> tag.
- Somewhere in between <head> </head> tags Copy & Paste the below code as we have shown.
You are only required to make a one change. Replace @meersworld with your Twitter username.
--------------------------------------------------------------------
<!-- Twitter Card -->
<meta name='twitter:card' content='summary_large_image'/>
<meta name='twitter:site' content='@meersworld'/>
<meta name='twitter:title' expr:content='data:view.title.escaped'/>
<meta name='twitter:description' expr:content='data:view.description.escaped'/>
<meta name='twitter:creator' content='@meersworld'/>
<!-- twitter:name with condition -->
<b:if cond='data:view.featuredImage'>
<meta name='twitter:image' expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")'/>
<b:elseif cond='data:widgets'/>
<b:loop values='data:widgets.Blog.first.posts where (p => p.featuredImage) map (p => p.featuredImage)' var='imageUrl'>
<meta name='twitter:image' expr:content='resizeImage(data:imageUrl, 1200, "1200:630")'/>
</b:loop>
<b:elseif cond='data:blog.postImageUrl'/>
<meta name='twitter:image' expr:content='resizeImage(data:blog.postImageUrl, 1200, "1200:630")'/>
</b:if>
<!-- Twitter Card Code Ends -->
--------------------------------------------------------------------
Step 2: Validate
- Go to https://cards-dev.twitter.com/validator
- Copy any of your blog post link.
- Paste the URL on the textbox.
- Click Preview card.
- If there is a problem then it will show you an error.
- If there is no problem it will show you card preview with large image.
- You're done.
Step 3: Share On Twitter
- Now open a post on your website and share on Twitter.
- Initially you might see the post with small thumbnail on Twitter, but don't worry.
- Clear the browser cache or history and refresh for sometime.
- Or open your Twitter account on some other browser to see the changes.
- It will be similar to this.
- Get access to all our Blogger Tutorials.
- If you like this post then don't forget to share with other people. Share your feedback in the comments section below.
Also Read:
Comments
Post a Comment