Lorsque vous lancez un nouveau site Web ou un nouveau blog pour la première fois, vous voudrez probablement le partager immédiatement avec vos amis et votre famille. Mais si vous ne l'avez pas configuré correctement, tout ce qu'ils verront, c'est un lien ennuyeux.
Même si l'aperçu charge une image, ce n'est peut-être pas celle que vous souhaitez voir. Mais vous pouvez résoudre ce problème.
Les balises Meta sont des balises HTML qui n'affichent aucun contenu sur votre page Web. Ils vivent à l'intérieur du balises dans votre HTML. Lorsque moteurs de recherche et autres services, comme Facebook, lisez votre page, ils obtiennent des informations ciblées à partir des balises meta.
Pour de nombreuses personnes, Google EST Internet. C'est sans doute l'invention la plus importante depuis Internet lui-même. Et si les moteurs de recherche ont beaucoup changé depuis, les principes sous-jacents sont toujours les mêmes.
Les balises Meta sont ce dont vous avez besoin pour que les médias sociaux et les messages texte traitent correctement vos liens. Lorsque vous partagez un lien via Facebook, par exemple, Facebook suit le lien vers la page. Il lit ensuite la page et essaie de comprendre ce que tout est.
Plus important encore, il essaie de trouver un titre, une description et une image. S'il ne peut pas les trouver, il affichera simplement un lien simple sans fioritures. Pour que Facebook affiche un titre, une description et une image spécifiques, vous devrez ajouter des balises méta spécifiques pour lui indiquer ce qu'il faut rechercher.
Si des sites de médias sociaux comme Facebook et Twitter obtiennent les informations dont ils ont besoin sur votre site Web, ils créeront une carte. Si tout s'est déroulé comme prévu, cela devrait ressembler à ce à quoi vous vous attendiez.
EN RELATION: Comment créer des robots Twitter, Instagram et Reddit à l'aide de Python
Si vous avez construit votre site Web avec du HTML simple ou un framework frontal, l'ajout de balises meta devrait être simple. Ils vont dans la même zone que vos balises de titre, de style et de script, comme dans l'exemple suivant:
Lee Nathan - Rédacteur en développement personnel
...
Vous pouvez voir qu'il y a déjà quelques balises META en place. Ce ne sont pas ceux dont vous aurez besoin pour que votre site Web s'affiche correctement dans les liens, ce ne sont que des valeurs par défaut de bas niveau.
La modification des balises méta dans WordPress est plus complexe. Des instructions complètes prendraient tout un guide. Alors à la place, voici quelques conseils pour vous aider à démarrer:
- Si vous êtes à l'aise pour modifier votre thème, les balises meta doivent être situées dans le header.php fichier de votre thème actuel.
- Si vous ne pouvez pas accéder à votre thème ou ne voulez pas vous en occuper, vous pouvez modifier vos balises méta avec un plugin comme Gestion avancée des balises Meta.
Jeter un coup d'œil à les meilleurs fournisseurs d'hébergement WordPress si vous souhaitez lancer un site sur la plateforme.
Comment créer une carte Facebook
Maintenant que vous avez compris comment accéder à vos balises Meta, vous pouvez commencer à les modifier. Voici les balises minimales que Facebook souhaite voir:
Les propriétés du titre et de la description indiquent à Facebook le texte à afficher. La propriété URL peut créer un lien vers une sous-page pour des promotions spéciales ou des tests A / B.
La propriété image doit être une adresse complète, non relative à votre page d'index comme /image.jpg. La meilleure taille d'image à utiliser est de 1200x628, car cette taille sera la plus compatible sur les sites et appareils de médias sociaux.
Comment créer une carte Twitter
La carte Twitter est presque la même que la carte Facebook, mais avec des balises méta différentes. Voici à quoi ressemblent les balises meta Twitter:
Les propriétés du titre et de la description sont les mêmes que celles de Facebook; la propriété image suit également les mêmes règles. Et 1200x628 est une bonne taille pour commencer.
La principale différence est la propriété de la carte. Cet exemple utilise "summary_large_image" pour créer une carte qui ressemble à peu près à la carte de Facebook. Twitter a cependant d'autres options.
Comment vous assurer que votre aperçu a l'air correct
Vous pouvez publier un tweet et le supprimer rapidement une demi-douzaine de fois jusqu'à ce que votre carte soit correcte. Vous pouvez également vous envoyer un message Facebook. Mais ces méthodes sont un peu maladroites. Heureusement, les deux services fournissent un outil pratique pour faciliter la vérification de vos cartes.
Facebook a un débogueur de partage. Et Twitter a un validateur de carte. Les deux outils effectuent la même tâche: vous permettre de voir comment fonctionnent les liens; ils utilisent simplement des noms différents.
Autres aspects à tester
Maintenant, vous avez obtenu le lien de votre site pour avoir fière allure sur les deux grands réseaux sociaux. Il y a de fortes chances qu'il soit beau partout, mais vous devriez le vérifier. Par exemple, si vous avez des informations en bas ou en haut d'une image, elles peuvent être tronquées sur le mobile.
Mobile
Avant d'aller plus loin, c'est une bonne idée de vous assurer que votre lien a toujours l'air bien sur mobile. Comme mentionné, votre image peut être coupée sur le petit écran. Dans l'exemple présenté précédemment, l'image était trop basse, de sorte que vous ne pouviez voir que la moitié supérieure de la tête.
SMS et messagers
Il s'agit simplement de vous envoyer un SMS (ou un message via un service comme WhatsApp) avec le lien. Vous n'avez pas à vous soucier d'un outil de validation. Il y a de fortes chances que si cela a l'air bien dans les applications de médias sociaux, cela aura l'air bien ici.
Si vous travaillez sur votre site Web personnel, vous voulez vraiment qu'il soit beau sur LinkedIn. Heureusement, LinkedIn fournit également un outil de validation a appelé l'inspecteur des postes. De plus, vous n'avez pas à vous soucier de plus de balises méta, car LinkedIn utilise les balises de Facebook.
Sur quoi travailler ensuite
Les informations que nous avons couvertes devraient être suffisantes pour vous aider à démarrer. Mais si vous voulez en savoir plus, consultez Guide Facebook des tags ou La page Twitter sur les balises.
Le Web regorge d'outils pour aider tout le monde à créer ses propres images partageables de qualité professionnelle. Voici nos favoris.
- Programmation
- HTML
- Page d'accueil
- Outils pour les webmasters
Lee est un nomade à plein temps et un polymathe avec de nombreuses passions et intérêts. Certaines de ces passions tournent autour de la productivité, du développement personnel et de l'écriture.
Abonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives!
Un pas de plus…!
Veuillez confirmer votre adresse e-mail dans l'e-mail que nous venons de vous envoyer.