Balises méta Twitter en HTML




Balises méta Twitter en HTML

Pour que l'URL d'un site Web s'affiche correctement sur une carte Twitter, des balises méta supplémentaires sont nécessaires, avec le descripteur d'éditeur, le titre de la page, la description du contenu (200 caractères maximum), le descripteur du contenu du créateur et une image, qui doit être plus grand que 120x120 pixels.

Meta tags Twitter SEO en HTML

Les balises META suivantes doivent être utilisées, avec le modèle ci-dessous qui peut être copié et collé.

Ceci est uniquement pour les cartes Twitter, et la balise META en HTML doit être collée dans la section head du code:

<!-- Twitter card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@Twitter_publisher" /> <meta name="twitter:title" content="Page title" /> <meta name="twitter:description" content="Page description" /> <meta name="twitter:creator" content="@Twitter_creator" /> <!-- Twitter 280x150px image --> <meta name="twitter:image:src" content="http://www.url.com/img.jpg" />

Graphique ouvert Twitter

Afin d'avoir toutes les spécifications de la carte de site Web Twitter, y compris les méta-étiquettes de la carte Twitter et les méta-étiquettes Facebook open graph, le code complet ci-dessous peut être utilisé.

Cela couvrira toutes les cartes HTML de méta-données des médias sociaux et permettra un partage correct de vos URL sur toutes:

<!DOCTYPE html> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en" prefix="fb: http://www.facebook.com/2008/fbml"> <head> <title>60 char title</title> <meta name="description" content="200 char description" /> <!-- Twitter card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@Twitter_publisher" /> <meta name="twitter:title" content="Page title" /> <meta name="twitter:description" content="Page description" /> <meta name="twitter:creator" content="@Twitter_creator" /> <!-- Twitter 280x150px image --> <meta name="twitter:image:src" content="http://www.url.com/img.jpg" /> <!-- Open graph Facebook card --> <meta property="og:url" content="https://www.url.com/"/> <meta property="og:type" content="website/article/..."/> <meta property="og:locale" content="en-US" /> <meta property="og:site_name" content="Site name" /> <meta property="og:image" content="http://www.url.com/img.jpg" /> <meta property="og:title" content="60 char title"/> <meta property="og:description" content="Page description" /> <meta property="article:published_time" content="2018-11-06 11:32:39" /> <meta property="article:modified_time" content="2018-11-06 11:32:39" /> <meta property="article:section" content="Section" /> <!-- Schema.org markup for Google+ --> <meta itemprop="name" content="Site name"> <meta itemprop="description" content="Page description"> <meta itemprop="image" content="http://www.url.com/img.jpg">

Balises méta Twitter carte

Une fois que les métadonnées Twitter ont été mises en place sur le site Web, leur partage produira l’apparence ci-dessous, étant donné que le titre, l’image et la description seront correctement récupérés par Twitter.

Validateur de carte Twitter

Une application en ligne pour les développeurs est disponible sur le site Twitter et permet aux développeurs de vérifier eux-mêmes si les cartes riches ont été correctement mises en œuvre sur leurs sites.

Ouvrez simplement la page Web, collez une URL dans laquelle les cartes riches de Twitter devraient apparaître et voyez les résultats ou les erreurs potentielles en cas de mise en œuvre incorrecte des balises.

Validateur de carte Développeurs Twitter

Taille de l'image post Twitter


Une image publiée dans un message Twitter doit faire au moins 120 pixels de large sur 120 pixels de large ou 120 x 120 pixels.

Respectez ces exigences minimales pour être sûr que vos images apparaîtront toujours correctement sur les publications Twitter et leur donneront une bonne apparence.

Où puis-je voler? (@wcanifly) Twitter
Yoann Bierling (@ybierling) Twitter
Aide Smartphone (@help_smartphone) Twitter
Comparateur de voyage (@travelcomparato) | Gazouillement
Plateforme de développeurs Twitter - Développeurs Twitter
Le club de plage de Kiev et la veilleuse de Kiev en été - Où puis-je voler?

Lectures supplémentaires

Afin d’optimiser vos balises méta pour l’affichage de cartes riches et d’autres fonctions de partage sur les réseaux sociaux, consultez ces formidables sites Web regorgeant d’informations utiles:

Aide-mémoire pour les développeurs Web 2.0
18 étiquettes méta que chaque page Web devrait avoir en 2014
Le protocole Open Graph
Pinterest Rich Pins pour les entreprises
WooCommerce - Boîte à outils Wordpress gratuite qui ajoute un balisage de produit

Méta tags Twitter SEO

Les balises méta Twitter SEO que vous devez posséder pour utiliser les cartes Twitter sont les suivantes: site, titre, description, créateur et image.

After having implemented these Méta tags Twitter SEO, sharing your website on Twitter will automatically pull these Méta tags Twitter SEO from your website to display a Twitter card.



Conseil en affaires internationales
A propos de l'auteur - Conseil en affaires internationales
Yoann est consultant en commerce international, facilitateur et coordinateur. Il a travaillé plus de 10 ans dans le commerce mondial, la chaîne d'approvisionnement, la finance, des projets SAP ERP, l'optimisation Web et SEO pour divers secteurs, tels que la logistique, les cosmétiques, les biens de consommation, les soins de beauté ou la mode, dans plus de 30 pays à travers le monde. .
 


commentaires (0)

laissez un commentaire