Twitter Card Instant Twitter in Early 2012 ago. There are many who use so many benefits from this Twitter Cards. Understanding Twitter Cards is almost identical to the Schema understanding we've been using to optimize the look of search engine snippets (rich snippet). Other social media such as Facebook and Google+, for example, already rely on meta opengraph to display a page snippet website or website content in timelinya. Twitter cards are slightly dependent on opengraph that has their own snippet code. Followed by Pinterest and several other social media platforms that also rely on opengraph.
Well, since other platforms like WordPress have various plugins to add opengraph and Twitter Cards, then displaying the Twitter Cards snipet is a breeze. No wonder if various sites and blogs based WordPress arguably 90% already use this feature. As for the Blogger platform, because it must do its own hack, not many who apply it. On this occasion I would like to call, cieee .. invite all buddy to optimize its content on Twitter better, wrong with this Twitter Card.
Type of twitter card
Twitter has 7 types of cards, each of which has functions and displays in different ways:
- Summary Card: The default is a default setting, in which there are titles, descriptions, thumbnail images, related accounts (twitter account links for sites and authors), and attribution links (links in titles and under snippets [see on the web], though all in the form of shortlink twitter).
- Summary Card With Large Image: Same as above, but use the bigger picture, above, follow the piece below.
- Photo Card: Its content is only the featured image (main image)
- Gallery Card: Snippet for content that contains images, which are in the snippet there are 4 images.
- App Card: Snippet mobile application complete with download link
- Player Card: Snippet for displaying audio / video content
- Product Card: Snippet optimized to display product information.
- From the 7th above, For content that is commonly encountered in Blogger blog only two, that is Summary (with thumbnail image on the side) and Big Picture Summary (big picture above snippet). So here I will only discuss and weigh the pieces for both types.
Add the Twitter Cards Snippet Code on Blogger
Although not automatically, luckily Blogger has various automated codes (XML tags) for printing (finding) various content, example titles, descriptions, post images, and so forth (meta exp: content = "xmlTags"). In addition Blogger also has Conditional Tags that can be used and applied to this type of hack.
The basic snippet code you can use is (default Summary Card):
<meta content='summary' name='twitter:card'/>
<meta content='@Webmasterseo' name='twitter:site'/>
<meta content='@Suzaku' name='twitter:creator'/>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<meta expr:content='data:post.title' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src' />
The above snippet is sufficient to display a post snippet with the Summary Card type, with the thumbnail on the side.
But what about who does not have meta description on post? What if you want to specialize on the post page only? Well, we need conditional tags here. So we develop. Notice in the meta description section too.
<b:if cond='data:blog.pageType == "item"'>The above snippet is to display a postcard-specific snippet, and if no (else) meta description in the post (added via meta description feature per post), will display a few words from the beginning paragraph of the post. Use this snippet if you want to display it in the form of a simple snippet.
<meta content='summary' name='twitter:card'/>
<meta content='@Webmasterseo' name='twitter:site'/>
<meta content='@Suzaku' name='twitter:creator'/>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<meta expr:content='data:post.title' name='twitter:title'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src' />
<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>
</b:if>
For more complex, we can use various conditional tags of Blogger. Use the following snippet to display snippets in the form of Summary Large Image. It will be very complex and long to explain, so please directly use or can be learned by yourself.
<b:if cond='data:blog.pageType == "item"'>Result :
<meta content='summary_large_image' name='twitter:card'/>
<b:else/>
<meta content='summary' name='twitter:card'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<meta content='@Webmasterseo' name='twitter:site'/>
<meta content='@Suzaku' name='twitter:creator'/>
<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>
<b:if cond='data:blog.pageType == "item"'>
<meta content='435' name='twitter:image:width'/>
<meta content='375' name='twitter:image:height'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image:src'/>
<b:else/>
<meta expr:content='data:blog.blogspotFaviconUrl' name='twitter:image:src'/>
</b:if>
</b:if>
1. Login Dashboard> Template> Edit HTML
2. Find / Ctrl + F <head>, place (paste) the snippet one of the snippet codes you select under <head>, or it can beneath other meta tags you've added,
3. Save.
Validate Twitter Cards
To see if the snippet you added is correct and correct, use the Twitter validation feature. This feature was also used to register sites that already contain the snippet code, but now no longer need. Every web page that already contains a Twitter Cards snippet is automatically validated. This feature is now used to view snippet display results. Please visit the Card Validator page, enter the url of one post and click "Preview Card".
Note:
1. It is recommended that the post description meta feature of each post be enabled and filled so that the description snippet is not truncated (not picking up from postal text).
2. If using bulk summary image, make sure the size of the resolution is not too small so that the image does not break.
That's it.
Write markup in comments
- To write letters bold using
<strong></strong>or<b></b>. - To write letters italic using
<em></em>or<i></i>. - To write letters underline using
<u></u>. - To write letters strikethrought using
<strike></strike>. - To write HTML code use
<code></code>or<pre></pre>or<pre><code></code></pre>, and please parse code in the parser box below.
Choose the Comment System