Tutorial • Twitter Cards toevoegen aan Weebly-website

"Hoe komt het toch dat andere bloggers zulke mooie previews hebben, terwijl ik steeds manueel een afbeelding bij m'n tweet moet voegen?" Dat vroeg ik me tot voor kort ook af, maar ik heb dé oplossing gevonden!

Weebly doet weer eens moeilijk. Herinner je je de Bloglovin'-kwestie? Maar ach, voor elk probleem is er online een oplossing te vinden – en die deel ik natuurlijk graag met jou! Hieronder zie je een screenshot van een van mijn kersverse, prachtige Twitter Cards! De URL die je in je tweet plakt, verandert na het tweeten automatisch in de preview. De tekst die je erbij getypt hebt, blijft gewoon staan en wanneer je op de afbeelding klikt, kom je op je blog terecht. Ideaal, toch?

Toegegeven, wij Weebly'ers dienen die Twitter Cards nog steeds blogpost per blogpost in te stellen – wáárom blog ik niet via Wordpress?! –, maar dan hebben we wél diezelfde aantrekkelijke Twitter-previews! Het is erg simpel.

Twitter Card voor een specifieke blogpost

1. (Belangrijk: Publiceer je blogpost eerst! Als je dat niet doet, kan je de URL van de afbeelding niet toevoegen aan je Twitter Card.)
2. Beslis of je een Summary Card met een grote afbeelding zoals hierboven wil, of een Summary Card met een klein afbeeldinkje links en de tekst rechts. Open een Kladblok- of Word-bestand en plak daarin de voorbeeldcode hieronder. Dat is de code van de Twitter Card in deze blogpost, ter illustratie. Heb je liever een klein afbeeldinkje met de tekst ernaast, laat dan _large_image vallen.
   
   ​<meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:site" content="@jessicajayblog" />
   <meta name="twitter:title" content="Ik vlieg er even tussenuit!" />
   <meta name="twitter:description" content="Tijd om de volgende bestemming op m'n lijstje af te strepen, want
   straks vertrekt ons vliegtuig!" />
   <meta name="twitter:image" content="http://www.jessicajay.eu/uploads/5/9/9/7/59978283/city-centre-705879-1280_orig.jpg" />
   ​
3. Vul nu jouw gegevens in: vervang @jessicajayblog door jouw Twitter-naam en vervang mijn title en description door de jouwe. Die hoeven trouwens niet dezelfde te zijn als die in je blogpost, maar gebruik zeker geen te lange zinnen. Die zullen namelijk niet volledig verschijnen en dat is natuurlijk niet de bedoeling. Bijkomende aanhalingstekens mag je ook niet gebruiken, want dan verliest Twitter het noorden.
4. Nu, de afbeeldings-URL. Surf naar je gepubliceerde blogpost, klik met de rechtermuisknop op de afbeelding die je wil gebruiken en selecteer Adres van afbeelding kopiëren. Vervang mijn afbeeldings-URL door de jouwe et voilà, de code voor jouw Twitter Card is af!
5. Kopieer jouw code en open de bewerkmodus van het artikel waarvoor je de Twitter Card gemaakt hebt. Sleep het element Embed Code – die tegel ziet er zo uit: </> – naar hélemaal bovenaan, vlak onder je titel. Plak de aangepaste HTML-code in dat vlak, publiceer je artikel en wees blij met je eigenste eigen Twitter Card!

Voordat je je URL tweet, kan je hem voor de zekerheid even testen met de Card Validator van Twitter. Dan zie je rechts je Twitter Card verschijnen en kan je de URL met een gerust hart tweeten!

Zo, ik hoop dat ik je kunnen helpen heb. Mocht je nog vragen hebben, stel ze dan gerust!

xo, Jessica J.

Bron afbeelding: Artem Sapegin