Twitter Cards on Blog

Does anyone have any experience adding Twitter cards to their websites? I am trying to ad it to my site so that when I tweet a link from my blog, a thumbnail appears.
I am not quite sure WHAT to implement WHERE.
Any help would be greatly appreciated!
Thank you everyone :slight_smile:

https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started
http://www.jonmessner.com

Meta tags for Twitter cards and open graph (Facebook) would go into the head section on your page.

You can type them by hand and paste them here:
2018-03-15_13-58-44

Or you could use RapidWeaver meta tags page and type them by hand:

Once you have them published you can test them here:
https://cards-dev.twitter.com/validator

1 Like

Doug thank you! My next question is, do I put the just the code below in the header section? Is there any other code I need to input?
<meta name="twitter:card" content="summary" />

Again, thank you!

pasting in the head section should work. Not sure but I think you might need the following - this is from the bottom of the twitter page you referenced above. Change the @tag to appropriate twitter ids.
There are other twitter meta tags you can use if you look at the bottom of the page they also use open graph.

<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />

I really haven’t kept up, so I would try some and use that tester. I do know that placing meta tags in the head section works, don’t know that much about all the meta tags twitter supports.

Doug, thank you very much. I will try this and let you know how it goes.

I cut and paste this code into my site:
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />
<meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" />
<meta property="og:title" content="A Twitter for My Sister" />
<meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." />
<meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />
Then I just changed the information to match my website. Again, thank you very much!!

2 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.