Florian ARGAUD
Florian ARGAUD's blog 🔥

Florian ARGAUD's blog 🔥

Social Meta Tags - Améliorez la prévisualisation de vos liens sur les réseaux sociaux

Social Meta Tags - Améliorez la prévisualisation de vos liens sur les réseaux sociaux
Florian ARGAUD's photo
Florian ARGAUD

Published on Feb 25, 2021

3 min read

Subscribe to my newsletter and never miss my upcoming articles


Il y a un aspect important mais souvent négligé lors de la création d'un site web : la création des meta tags pour les réseaux sociaux. Ces meta tags permettent aux réseaux sociaux d'afficher une 'card' à la place de votre lien.

C'est plus visuel, plus impactant et cela permet de partager plus d'informations avec un seul lien. C'est ce que nous allons voir dans cet article.

Exemple de Card via les Social Meta Tags

Les meta tags doivent être placés entre les balises <header> de votre projet. Pour les réseaux sociaux, nous allons utiliser le protocole Open Graph (og) , qui est aujourd'hui un standard, via des attributs 'property'. Les réseaux sociaux (Facebook, Linkedin, ...) l'utilisent afin de remplir la card.

Twitter utilise aussi ses propres propriétés afin de déterminer le type de card que vous voulez montrer, via l'attribut 'name'

<!--  META Tags essentiels pour le partage sur les réseaux -->


<!-- Le Titre de votre card -->
<meta property="og:title" content="Florian ARGAUD - développeur NuxtJS x TailwindCSS">
<!-- La Description de votre card -->
<meta property="og:description" content="Hello 👋 Je suis Florian, développeur web FullStack & JAMstack spécialisé VueJS / NuxtJS, TailwindCSS & Netlify !">
<!-- Lien vers votre bannière -->
<meta property="og:image" content="https://www.florianargaud.com/img/og_banner.png">
<!-- URL de votre site -->
<meta property="og:url" content="https://www.florianargaud.com/">
<!-- Tyoe de Card Twitter -->
<meta name="twitter:card" content="summary_large_image">


<!--  Meta Tags non essentiels, mais fortement recommandées -->

<meta property="og:site_name" content="Florian ARGAUD - Développeur NuxtJS">
<meta name="twitter:image:alt" content="Texte alternatif pour l'image">


<!--  Non essentiels, mais utile pour vos analytics -->

<meta name="twitter:site" content="@icesofty">

Pour la création de l'image, j'utilise l'excellent Figma. La résolution conseillée de l'image est de 1200x630. Voici un exemple :

banner.png

Pour avoir une preview de votre card, Twitter & Linkedin proposent un outil vous permettant de prévisualiser votre Card afin de s'assurer que tout fonctionne correctement avant de partager votre lien :

cards-dev.twitter.com/validator

linkedin.com/post-inspector


 
Share this
Proudly part of