Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Now that we are generating images from the Pens you create, we can start using them for a variety of fun and useful things. The first thing we did was ensure the main RSS feeds had images. Now we’ve added Twitter Cards so that there is more context when sharing Pens. The Editor View and the Details view both have the proper tags, so sharing those URLs will contain the card.

This is how a Tweet looks with the full card:


Some clients show Twitter Cards, some don’t, and some use special formats when this “Large Image Summary Card” doesn’t work for them. Like TweetDeck:


Embedded tweets have their own format as well:

Hope you enjoy! I know we like being able to see the preview in tweets as we troll around Twitter finding all the cool stuff you folks post.

We have a number of improvements already on the roadmap as well, so as always, stay tuned!