.gif)
Twitter offers the option to make website 'cards', or short previews, in tweets to promote content. You may have noticed that I've started employing these cards in my messages featuring blog links. Using these cards can boost your page views and make your links more appealing.
On computers, the ones I use typically appear like this:
On mobile devices, they look like this:
Twitter provides a multitude of card options, but today I am highlighting a specific card, the one I use most often: a summary card with a large image.
*A note: My method caters to the blogging platform I use, Blogger. I am not saying that this process cannot be applied to Wordpress or another program, however methods may vary for different platforms. I believe Wordpress offers plug-ins for these cards.
Find your head
The first step involves diving into your blog's code. Initially, this may seem intimidating, but don't panic! Start by locating your blog template. Always back up your template before editing! In Blogger, you can access the code through the 'Edit HTML' button under your blog preview.
You should see something similar to this:
Now, you need to identify the <head> portion of your blog's code. Usually, this element is visible at the top of your code and easy to locate. If necessary, you can also press CTRL and F on your keyboard to open a webpage search; then search <head> to find this section.
Add a backbone
For Twitter to recognize your cards, you need to add this crucial line of code somewhere within your <head>.
<meta name="twitter:card" content="summary" />
This step is essential; without it, your cards will quickly expire!
Once you've added it, save your template. You will not have to repeat this portion of the process in the future.
Choose a post
This step is perhaps the easiest and most straightforward part of this method. Select the post you want to promote on Twitter, and open it as if you were editing it. For this tutorial, I will use my reaction to the Allegiant trailer.
Switch to HTML mode, so you are looking at your post's code.
The moment we've all been waiting for
To enact your Twitter card, copy and paste the code below into your post's HTML, and save. But wait! This code is customized for my post, and you need to customize it for yours.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ccovertocover" />
<meta name="twitter:title" content="Disloyal for the Better? Allegiant Trailer and Ascendant Reveal | Cover to Cover" />
<meta name="twitter:description" content="On September 15, Lionsgate released the first teaser trailer for Allegiant, an upcoming young adult film based on Veronica Roth's Allegiant. Although Allegiant is the last book in the Divergent trilogy, the movie company recently announced that the final installations in the movie adaptation series, however, will be divided into two parts: Allegiant, releasing March 2016, and Ascendant..." />
<meta name="twitter:image" content="http://1.bp.blogspot.com/-jsyEA9zMr1c/Vf9QrrJ-pUI/AAAAAAAAA-0/GWFb8TrRW-A/s1600/MANHATTAN.jpg" />
Here's a rundown to help you customize this code.
<meta name="twitter:card" content="summary_large_image">
- The first line? Don't bother with it. That's simply recognizing your Twitter card.
<meta name="twitter:site" content="@ccovertocover" />
- The second line identifies your Twitter handle. You need to change @ccovertocover, my handle, to yours. I have made it bold for easier visibility. Regardless, ensure the quotations remain around your handle.
<meta name="twitter:title" content="Disloyal for the Better? Allegiant Trailer and Ascendant Reveal | Cover to Cover" />
- The third line is your blog post name. Change it to what you would like. In this example, the title is "Disloyal for the Better? Allegiant Trailer and Ascendant Reveal". Again, you need to make sure quotations still surround your blog post title.
<meta name="twitter:description" content="On September 15, Lionsgate released the first teaser trailer for Allegiant, an upcoming young adult film based on Veronica Roth's Allegiant. Although Allegiant is the last book in the Divergent trilogy, the movie company recently announced that the final installations in the movie adaptation series, however, will be divided into two parts: Allegiant, releasing March 2016, and Ascendant..." />
- The fourth line is a short post summary that will appear under your image and blog title. I like to take the first sentence or two of my post for this entry. The first two sentences of my Allegiant post are in bold above. Use what you'd like, and be mindful of the quotation marks.
<meta name="twitter:image" content="http://1.bp.blogspot.com/-jsyEA9zMr1c/Vf9QrrJ-pUI/AAAAAAAAA-0/GWFb8TrRW-A/s1600/MANHATTAN.jpg" />
- The final line is the URL of the image you would like to feature on your Twitter card. I have made the image URL I used in the example bold.
You should be left with something like this in your post's HTML:
Save and exit!
Just to be safe
To ensure that you completed this process correctly, head over to the Twitter card validator. Copy and paste your blog post's URL into the 'card URL' bar. If you did this correctly, you should see a preview of your Twitter card!
You've done it! Now, share to Twitter and admire your work!
For more information, you can visit the Twitter "Getting Started Guide"!
Have you ever used a Twitter card? Do you plan to use one?
Wow, I had no clue Twitter cards could be used by bloggers -- I thought they were just for ads! This seems a teensy bit complex to do for every single post, though. I think I shall just bookmark this tutorial for special flagship posts or something. Great tip!
ReplyDeleteThanks Alyssa! Admittedly, you do have to repeat the block code, but you only have to insert the code in your head once. I usually just use the post code above as a template, and edit the specific parts relevant to a specific post.
DeleteOooh I have been wondering about this forever! I thought it was an automatic feature somewhere that I haven't managed to access haha. Thank you for sharing!
ReplyDeleteNo problem! I'm glad it was helpful!
DeleteI'm completely new to Twitter and this is such a foreign concept to me! Thanks for the whole tutorial - I'll definitely give it a try soon! :D
ReplyDeleteYay, I can't wait to see it!
DeleteAmaziiiiing /wow/ I love this post! -Sil
ReplyDeleteThanks!
DeleteOh I was so confused until I read your post hahah! I have blogger, which means I can do this, but most of my graphics actually aren't rectangular! But I'll bookmark your post for posts that I CAN do this! Thanks for the tutorial Claire!
ReplyDeleteI'm glad you found it helpful, Val, and I hope you use them sometime soon!:)
DeleteThis is so interesting! I never really paid much attention to them and just "overlooked" these cards but it can be pretty handy! I'll definitely try to use this once in a while - thanks a lot for sharing & explaining! :D
ReplyDeleteYvonne @ A World Between Folded Pages
No problem! I'm happy to help:)
DeleteI am 100% confused.
ReplyDeleteI'm sorry to hear that! For any clarification, I am available on Twitter, Instagram, and communication via email.
DeleteOMG. It took me four months, but I got it! I think I was confused because I went to preview them, and it said I was whitelisted. I didn't realize that meant that it was still gathering everything it needed. Oops! But I just tried with my latest post, and it's working!
DeleteI was so frustrated, but now I feel so stupid because I had it righ the whole time. lol
I'm glad to hear it, Erin! The 'whitelisting' thing has happened to me a lot before, it took me a while to figure it out too:/.
DeleteFirst of all, I freaking LOVE your blog! No wonder how pretty it is. I suck at these stuff and I will try my best to try this out. Thank you so much for sharing and for the tutorial, but it is a great concept!
ReplyDeleteI definitely followed you now! :)♥
Jumana @ Books by Jay
Thank you so much, Jay, I'm happy to hear you're going to try it!:)
DeleteThat sounds great! I didn't know about it before... :O
ReplyDeleteAnd you described how to do it in an easy way to understand. Thank you! I'll deffinitely do this soon (:
Great advice for promoting your blog ^^
I'm glad you found it helpful, Zoey!
Delete