Add & Display Twitter Cards Snippets for Blogger - Hallo Dear, elisa-head.blogspot.com, This article that you read this time with the title Add & Display Twitter Cards Snippets for Blogger, We have prepared this article well for you to read and retrieve the information in it. hopefully the contents of we write can be understood by you. Alright, happy reading.

Title : Add & Display Twitter Cards Snippets for Blogger
link : Add & Display Twitter Cards Snippets for Blogger

Add & Display Twitter Cards Snippets for Blogger

[ad_1]

how to install a complete blogger twitter card

Twitter Cards Twitter was introduced in early 2012. Many have used it so that many also benefit from this Twitter Cards. Understanding Twitter Cards is almost the same as understanding Schema which we have been using to optimize the appearance of content snippets on search engines (rich snippets). Other social media such as Facebook and Google+, for example, have relied on meta opengraph to display website snippets or website content in their timelines. Twitter Cards rely a little on the opengraph even though it has its own snippet code. Followed later by Pinterest and several other social media platforms that also rely on Opengraph.

Now, because other platforms like WordPress have various plugins to add opengraph and Twitter Cards, displaying Twitter Cards snippets is easy. No wonder that various WordPress based websites and blogs are arguably 90% already using this feature. As for the Blogger platform, because they have to do their own hacks, not many have implemented it. On this occasion I want to call, cieee .. invite all my friends to optimize their content on Twitter better, one of them with Twitter Cards.

Type of Twitter Cards

Twitter has 7 types of cards, each of which has a function and is displayed differently:

Summary Card: It is default or is the default setting, in which there are titles, descriptions, thumbnail images, related accounts (twitter account links for sites and authors), and attribution links (links in the title and under snippets (view on the web), although everything in the form of Twitter shortlinks).

Summary Card With Large Image: Same as above, but using a bigger image, above, followed by another snippet below.

Photo card: It contains only featured images (featured image)

Gallery Card: Snippets for content that contains an image gallery, which is displayed in the snippet there are 4 images.

App Card: Snippet mobile application complete with the download link

Player Card: Snippet to display audio / video content

Product Card: Snippet optimized to display product information.

From the 7 above, there are only two types of content commonly found on Blogger blogs, namely Summary (with thumbnail images on the side) and Summary Large Image (large image above snippet). So here I will only discuss and provide snippets for both types.

Adding Twitter Card Snippet Codes on Blogger

Although not automatically, fortunately Blogger has its own automatic code (XML tags) to print various content information, such as title, description, post image, etc.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 that can be used is (default Summary Card):

@bukarahasiablog'name =' twitter: site '/>
@ahkhoazmi'name =' twitter: creator '/>

The snippet above is enough to be able to display snippet posts with Summary Card types, namely with thumbnails on the side.

But what about those that don't have a meta description in the post? What if you want to be specific to the post page only? Now, we need conditional tags here. So we develop. Pay attention to the meta description too.

@bukarahasiablog'name =' twitter: site '/>
@ahkhoazmi'name =' twitter: creator '/>

The snippet above is to display the post page specific snippet, and if there is no meta description on the post (added via the feature meta description per post), several words will appear from the initial paragraph of the post. Use this snippet if you want to display it in simple snippet form.

For more complex, we can use various Blogger's conditional tags. Use the following snippet to display the snippet in the form of a Large Image Summary. It will be very complex and long to explain, so please use it directly or learn it yourself. Hehe...

@bukarahasiablog'name =' twitter: site '/>
@ahkhoazmi'name =' twitter: creator '/>

Example of the results:

Please use one of the two types of snippets above. Be sure to change the following points:

Over @bukarahasiablog with your blog / site account.

Over @ahkhoazmi with a personal account (author), if the same, it means that both accounts can be written the same.

435 is the width value of the image (in pixels), this default size matches the width of the twitter content page. Leave it if you want the width to be the default.

375 is the high value of the image (in pixels), you can change it at will.

How to Add Via Blogger's HTML Edit

1. Enter Dashboard> Template> Edit HTML

2. Search / Ctrl + F , paste (snippet) one of the snippet codes that you selected below , or it can be under other meta tags that you have added,

3. Save.

Twitter Cards Validation

To see if the snippet you added is correct and correct, use Twitter's validation feature. This feature was also used to register sites that already have the snippet code, but now there is no need. Every web page that already contains the Twitter Cards snippet is automatically validated. This feature is now used to view snippet display results. Please visit the page Card Validator, enter the url of one of the posts and click "Preview Card".

Note:

1. It is recommended that the meta description feature of each post is activated and filled in so that the description snippet is not truncated (does not take from the original text of the post).

2. If using a large image summary, make sure the resolution size is not too small so that the image does not break.

That is it.

[ad_2]

Thus the article Add & Display Twitter Cards Snippets for Blogger

So this article, Add & Display Twitter Cards Snippets for Blogger hopefully can benefit you all. ok, see you in another article post.

You are now reading the article Add & Display Twitter Cards Snippets for Blogger with the link address https://elisa-head.blogspot.com/2019/10/add-display-twitter-cards-snippets-for_11.html