Social Meta Tags - Améliorez la prévisualisation de vos liens sur les réseaux sociaux
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.
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 :
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