DEV Community

Cover image for How to add Twitter Card Meta Tags to your Blog

How to add Twitter Card Meta Tags to your Blog

Dan Vega on February 24, 2019

For those of you who haven't been reading my blog lately, I am in the middle of converting my website from WordPress over to a static site generato...
Collapse
 
gabreeyel profile image
Loya Blaise

I love this article and would want to see one on facebook.

Collapse
 
therealdanvega profile image
Dan Vega

Where on facebook are folks cross promoting dev.to articles?

Collapse
 
gabreeyel profile image
Loya Blaise

Was asking you have something about facebook similar to the twitter card.

Thread Thread
 
therealdanvega profile image
Dan Vega

Nothing in a blog post but you just need to use the open graph tags.

css-tricks.com/essential-meta-tags...

Thread Thread
 
josephikpontu profile image
JOEYCRACK

This site confused me when I tried to implement this just go to the Facebook documentation it's pretty straightforward and simple

Collapse
 
thespiciestdev profile image
James Allen

Awesome, thanks! The frontend side of me knew that this existed in some way or form (I'm sure Facebook and other sites have something similar) and what you've written here shows this clearly - thanks again!

Collapse
 
equinusocio profile image
Mattia Astorino

Now that you know it, you can also use this
metatags.io/

Collapse
 
daviddalbusco profile image
David Dal Busco

Is there any advantages on using twitter meta tags instead of og tags?

I think og are interpreted by twitter too, so I'm curious to know if there is any extra advantages on using these specific ones

Collapse
 
andypiper profile image
Andy Piper

The card types do not directly match the OpenGraph ones - if you share an og:article, then Twitter will render a summary card, but not a summary_large_image card, so in that case you'd want to add the twitter:card type tag. However, you're right, in most cases the twitter: tags do map to og: equivalents, so you can keep the amount of markup to a minimum if you use the og: fallbacks in most cases.

Collapse
 
daviddalbusco profile image
David Dal Busco

Thx a lot for the interesting add-on/answer @andypiper !

Collapse
 
eugenitokmakova profile image
Eugenia Tokmakova

Thank you

Collapse
 
danielsarmiento profile image
Daniel

Thank you for this post, Dan. Seeing your actual meta tags helped me realize where my mistake was! I was giving a relative path to the assets folder instead of the full URL.