Dans ce didacticiel, nous allons voir comment intégrer du contenu dans votre contenu avec des graphes ouverts, des cartes Twitter et des microdonnées. Ce faisant, votre contenu sera plus attrayant, plus pertinent et plus facilement lisible par les utilisateurs potentiels..
Google, Facebook, Twitter et les autres plates-formes que vous et moi utilisons pour partager et découvrir du contenu ne parviennent toujours pas à lire dans nos pensées. Les machines qui alimentent le cloud comptent sur vous et moi, concepteurs et développeurs, pour leur apprendre le sens de notre contenu et son lien avec notre public cible. En enseignant à ces plateformes l'abstraction et le sens, nous leur permettons d'afficher un contenu plus pertinent, plus provocant et plus facile à découvrir.
Qu'est-ce que la découvrabilité?
La découvrabilité est la facilité avec laquelle une machine ou une personne peut trouver un peu d'informations pertinentes en ligne.
Laquelle de ces publications Facebook attire le plus votre attention??
Lequel de ces tweets est le plus provocateur?
Et lequel de ces résultats de recherche Google semble plus pertinent pour vos intérêts?
Les différences ci-dessus sont claires. Si vous n'implémentez pas le protocole Open Graph de Facebook, le système de cartes de Twitter et les microdonnées pour les moteurs de recherche, votre contenu est probablement ignoré au profit d'un contenu plus pertinent affiché par vos concurrents. Dans cet article, je vais vous montrer l'importance de comprendre votre public cible lors de la mise en œuvre de ces systèmes dans votre balisage sémantique..
Balisage
Tout d'abord, en quoi consiste exactement balisage?
“Un langage de balisage de document est un système moderne permettant d'annoter un document de manière syntaxiquement distincte du texte. - Wikipédia
En termes plus simples, il s'agit d'un moyen de marquer, d'annoter ou de styliser un document avec des stylos, des crayons ou des ordinateurs de manière à ce que son apparence soit symboliquement différente de celle de votre texte. marquer. Le terme vient de relecteurs qui voudraient balisage manuscrits pour modifications.
Extrait du Chicago Manual of Style
Les marques des correcteurs constituent une forme de balisage. N'oubliez pas ces cours d'anglais au collège (ou étiez-vous trop occupé (e) à jouer avec votre beau baladeur pour faire attention?!)
Voici trois façons de baliser un document numérique pour indiquer un en-tête:
HTML:
Je suis la meilleure rubrique
Réduction
## Non, je suis la meilleure rubrique
Latex
\ section je suis LaTeX
Maintenant que vous comprenez mieux ce que LaTeX… err, balisage Nous allons créer un document HTML5 de base avec un seul contenu. Nous nous en servirons pour illustrer les différentes façons de donner un sens à ce contenu, ce qui augmentera sa découvrabilité..
HTML
Commencez par créer le document HTML initial dans l'éditeur de texte de votre choix..
C'est tellement plus simple que par le passé. Ajoutons maintenant du contenu!
Contenu
Voici notre seul contenu, une image d'un chat très malheureux, dans une section du corps de notre document.
Égayer son compagnon…
Titre
Maintenant que nous savons sur quel contenu nous travaillons, nous pouvons ajouter le premier bit de le contexte à notre page. Notre vieil ami, </code> balise dans le document <code><head></code>. </p><pre><head> <title> Félin abandonné
Passons à quelque chose d'un peu plus difficile (bien que toujours simple) avec le protocole Open Graph de Facebook!
Protocole graphique ouvert de Facebook
Le protocole Open Graph permet à n'importe quelle page Web de devenir un objet riche dans le graphe social de Facebook. Il permet à n'importe quelle page Web d'avoir une fonctionnalité similaire à celle d'un objet sur Facebook..
Le graphique ouvert de Facebook (ainsi que le système de cartes de Twitter, que nous examinerons plus loin) fonctionne avec les métadonnées que vous ajoutez dans vos pages Web. . Le même endroit que nous venons de mettre notre </code>. Dans le cas du protocole de graphe ouvert de Facebook, il y a <em>quatre propriétés</em> qui sont nécessaires.</p><h3>Requis Open Graph Markup</h3><p>Les quatre propriétés de graphique ouvert requises par Facebook sont les suivantes: </p><ol> <li>Titre</li> <li>Type</li> <li>Image</li> <li>URL</li> </ol><h4>Titre</h4><p>Le premier d'entre eux est la balise title, qui est le titre de votre objet tel qu'il devrait apparaître sur Facebook..</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_5.png"><p>Voici comment mon exemple s'intitulera lorsque le document HTML sera partagé sur Facebook.</p><pre><meta property="og:title" content="Forlorn Feline" ></pre><p><strong>Remarque</strong>Si vous créez un titre différent du titre original, Facebook vous signalera une erreur lors du débogage de votre page. Facebook permet la différence mais ne validera pas à 100%. Je ne sais pas pourquoi Facebook fronce les sourcils à ce sujet, si vous avez des idées, pourquoi me le faire savoir!</p><h4>Type</h4><p>La deuxième propriété requise par Facebook est le type d'objet qu'il montrera aux utilisateurs sur sa plateforme..</p><p>Notre contenu ne représente pas la musique ou la vidéo. Ce n'est pas non plus un article, un livre ou un profil. Il ne nous reste plus que le fait que notre contenu réside dans un document HTML qui, une fois téléchargé sur un serveur Web, devient un site Web..</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_6.png"><pre><meta property="og:type" content="website" ></pre><h4>Image</h4><p>La troisième propriété requise par Facebook est une image qui représente notre objet. Celui-ci est assez simple!</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_7.png"><pre><meta property="og:image" content="images_12/improve-your-websites-discoverability-with-semantic-markup_2.gif" ></pre><h4>URL</h4><p>La quatrième et dernière propriété requise par Facebook est l'URL que les utilisateurs rencontrent lorsqu'ils interagissent avec l'objet..</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_8.png"><p>Tout comme la propriété image celle-ci est assez simple.</p><pre><meta property="og:url" content="http://ryanallen.com/forlorn-feline.html" > </pre><p>Cela le fait pour tout ce qui est requis. Il est temps de faire plus abstrait avec le <em>sens</em> nous injectons dans notre contenu, et pour cela nous devons identifier notre public cible.</p><h3>Public cible</h3><p>Le but de cet article n'est pas de vous apprendre à identifier votre public cible. Je tiens cependant à vous faire comprendre l’importance de savoir qui il s’agit. Lorsque vous créez un contexte dans votre contenu, vous devez savoir qui vous souhaitez découvrir, et ce qu’ils doivent apprendre sur ce contenu..</p><p>Pour le contenu de cet article, à l'image du chat malheureux, le public cible est un concepteur de sites Web qui cherche à en savoir plus sur la découvrabilité (vous). Voyons à quoi cela ressemble ensuite dans le balisage optionnel que Facebook comprend.</p><h4>Balisage abstrait facultatif</h4><p>Nous pouvons ajouter du balisage supplémentaire, comme une description, ce qui, bien que non obligatoire, le rend beaucoup plus intéressant pour tous ceux qui consultent notre contenu..</p><p>Alors, quelle devrait être notre description? Il devrait être relatif au public cible.</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_9.png"><pre><meta property="og:description" content="Vincenzo the cat is sad that no one is discovering the online content he worked so hard to create. Such hurt. Very Sadness." ></pre><p>Génial! Rappelez-vous comment je vous ai dit que Twitter fonctionne de manière similaire au protocole Open Graph de Facebook. Jetons un coup d'oeil à la prochaine!</p><h2>Gazouillement</h2><p>Twitter requiert des propriétés différentes selon le type de carte que vous utilisez. Pour cet exemple, nous utiliserons la carte de résumé par défaut qui requiert ces quatre propriétés:</p><ol> <li>Type de carte</li> <li>Attribution</li> <li>Titre</li> <li>La description</li> </ol><p>La plupart de ces propriétés ne nécessitent pas réellement de travaux supplémentaires. Pourquoi donc?</p><blockquote>“Lorsque le processeur de carte Twitter recherche des balises sur votre page, il vérifie d'abord la propriété Twitter et, si elle n'est pas présente, revient à la propriété Open Graph prise en charge. Cela permet de définir indépendamment les deux sur la page et de minimiser la quantité de balises en double requises pour décrire votre contenu et votre expérience. - Twitter </blockquote><h3>Réduire au minimum les annotations en double</h3><p>C'est génial! Les balises que nous n'avons pas besoin de dupliquer (bien que vous puissiez le faire si vous aviez une raison) sont: </p><ol> <li><code>og: titre</code></li> <li><code>og: description</code></li> <li><code>og: image</code></li> </ol><p>Trois vers le bas, deux pour aller!</p><h3>Type de carte</h3><p>Tout d'abord, disons à Twitter le type de contenu que nous partageons. Nous allons définir cette carte sur la carte de résumé par défaut lorsque le document HTML est partagé sur Twitter..</p><pre><meta name="twitter:card" content="summary" ></pre><p>C'était simple, quelle est la prochaine? J'espère que c'est quelque chose de génial!</p><h3>Attribution</h3><p>Twitter nécessite l'attribution d'un compte avec un compte Twitter appartenant au créateur de contenu et / ou au propriétaire du contenu. Si le contenu appartient à une page de l'entreprise ou à un service de l'entreprise (ou existe sur le site de l'entreprise mais n'appartient pas à l'entreprise), vous pouvez utiliser une attribution de style de site..</p><p>Voici à quoi cela ressemblera s'il est hébergé sur mon site personnel:</p><pre><meta name="twitter:creator" content="@ryanallen_com" ></pre><p>Voici à quoi cela ressemblerait si Tuts + Web Design hébergeait le code HTML:</p><pre><meta name="twitter:creator" content="@ryanallen_com" > <meta name="twitter:site" content="@wdtuts" ></pre><p>Twitter devra s'authentifier et mettre en liste blanche le domaine pour chaque type de Twitter Card. C'est simple et automatisé, bien que je ne sache pas ce que cela implique si vous êtes sur la liste noire. Si quelqu'un a de l'expérience avec cela, j'aimerais apprendre plus.</p><p>Voilà pour Twitter! Heureusement que nous avons d'abord ouvert Open Graph, Twitter permet de gagner beaucoup de temps en travaillant avec d'autres plates-formes au mieux de ses possibilités. Merci Twitter!</p><p>Il est temps de revoir les moteurs de recherche pour trouver de nouvelles façons, optimales et contextuelles d'optimiser votre contenu..</p><h2>Optimisation des microdonnées et des moteurs de recherche</h2><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_10.png"><p>Tout d'abord, un mot rapide de Microsoft:</p><blockquote>«Le 2 juin [2011], nous [Microsoft] avons annoncé une collaboration entre Bing, Google et Yahoo afin de créer et de prendre en charge un ensemble standard de schémas pour le balisage de données structurées sur des pages Web. Bien que nos sociétés soient concurrentielles à bien des égards, il nous était évident que la collaboration dans cet espace serait bénéfique pour chaque moteur de recherche individuellement et pour l’ensemble du secteur. - Michael O'Connor </blockquote><p>Les microdonnées sont différentes des autres balises que nous avons déjà structurées en ce sens qu'elles ne vivent pas dans l'en-tête du document..</p><p>Nous utiliserons des microdonnées pour insérer le contexte dans notre contenu dans le corps de notre document HTML. Les moteurs de recherche utiliseront nos données pour améliorer la possibilité de découvrir notre contenu pour leurs utilisateurs..</p><p>Les machines croient ce que nous leur disons. Pour l'instant au moins… </p><h3>Balisage des microdonnées requis </h3><p>Les balises suivantes sont requises pour chaque élément pour lequel vous souhaitez donner un sens.. </p><ol> <li>Portée de l'article</li> <li>Type d'élément</li> </ol><p>Nous devons d’abord identifier le <em>chose</em> nous décrivons. Amusons-nous avec la sémantique et construisons un contexte ou une signification dans notre contenu destiné à notre public cible.</p><p>N'oubliez pas que nous n'avons qu'un seul élément de contenu. Quel est le sens évident contenu dans notre image??</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup.gif"><p>Eh bien, ça ressemble à un chat. C'est super car Internet aime les chats! Quoi <em>chose</em> représente le mieux un chat dans le balisage de schémas disponible?</p><p>La signification contenue dans cette image n'est probablement pas une action, un service de diffusion, une entité médicale d'événement ou un lieu. Il s’agit bien d’une création, en particulier d’un exemple d’œuvre visuelle, bien que Google apporte actuellement des modifications susceptibles d’affecter l’utilisation de cette balise à court terme:</p><p><br></p><blockquote contenteditable="false"> <p>@ryanallen_com @googledevs @google Non, nous avons plutôt retardé (espérons-le un moment) l'intégration des ajouts de Feb, c'est-à-dire http://t.co/09JUDuUIww</p>- Dan Brickley (@danbri) le 2 mars 2015 </blockquote> <p>Déclarons le <code>type d'élément</code> à l'intérieur de la balise de section:</p><pre><section itemscope itemtype="https://schema.org/CreativeWork" > <img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_2.gif" > </section></pre><p>C'est un bon début, même si notre contenu n'a toujours pas de sens. Google, Bing, Yahoo et Yandex sont maintenant à 100% certains que notre contenu est un travail créatif, mais rien d’autre. Ajoutons un contexte plus significatif visant notre marché cible: les concepteurs Web..<br></p><h3>Propriétés facultatives des microdonnées</h3><p>Il n'est pas nécessaire pour moi de répertorier toutes les propriétés que vous pouvez utiliser avec le type d'élément Travail créatif. En voici quelques unes relatives aux concepteurs Web, que nous avons identifiés comme notre public cible..</p><p>Commençons par déclarer tout ce qui concerne ce contenu n'est pas abstrait, mais concret, ferme et inchangé dans sa signification.. </p><h4>Image</h4><p>Tout d’abord, il s’agit d’une image avec un emplacement source (<code>src</code>) sur le Web.</p><pre><img itemprop="image" src="images_12/improve-your-websites-discoverability-with-semantic-markup_2.gif" > </pre><h4>Auteur</h4><p>Je suis l'auteur ou le créateur de l'illustration numérique.</p><pre><meta itemprop="author" content="Ryan Allen" ></pre><h4>Public</h4><p>Vous cherchez bien! Ajoutons maintenant notre public cible.</p><pre><meta itemprop="audience" content="web designers" ></pre><h4>Usage éducatif</h4><p>Nous allons maintenant définir le type d’utilisation pédagogique que nous voulons pour cette image, qui est un <em>Exemple</em> dans ce cas.</p><pre><meta itemprop="educationalUse" content="example" ></pre><h4>Conviviale et familiale</h4><p>Rien à ce sujet n'est NSFW, alors assurons-nous que c'est clair.</p><pre><meta itemprop="isFamilyFriendly" content="true" ></pre><h4>Personnage</h4><p>Comment avons-nous nommé notre personnage de chat?</p><pre><meta itemprop="character" content="Vincenzo" ></pre><p>Oh oui. C'est un nom assez génial, même s'il évolue dans un domaine plus abstrait. Les choses sont sur le point d'obtenir tout résumé maintenant. </p><h4>Sur</h4><p>Ajoutons un peu plus de contexte à la situation de notre image par rapport à notre public cible.</p><pre><meta itemprop="about" content="Vincenzo the cat is sad that no one is discovering the online content he worked so hard to create. Such hurt. Very Sadness." ><br></pre><p>Terminons avec une liste de mots-clés relatifs, délimités par des virgules, ciblés et relatifs, afin de modifier le facteur de découvrabilité de notre contenu au-dessus de 9 000..</p><pre><meta itemprop="keywords" content="designer, design, web design, seo, discoverability, open graph, twitter cards, microdata, google, bing, microsoft, yahoo, yandex, content, context, semantics, meaning, sad, cat, animation, gif, cute, illustration, tutsplus" > </pre><h4>Valider</h4><p>Il ne reste plus qu'à valider votre code avec Google, puis Facebook et enfin avec Twitter. Voici à quoi cela ressemble dans:</p><h4>Facebook</h4><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_11.png"><h4>Gazouillement</h4><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_12.png"><h4>Google</h4><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_13.png"><h2>Résumé</h2><p>Alors qu'est-ce que tout ressemble ensemble?</p><pre><!DOCTYPE html> <html> <head> <title> Félin abandonné
Share
Extrait du Chicago Manual of Style
Égayer son compagnon… 
Accentsconagua