Catégories
Astuces et Design

Utilisation de données structurées pour améliorer l'optimisation des moteurs de recherche

Le référencement est souvent considéré comme l'huile de serpent du Web. Combien de fois avez-vous fait défiler des titres accrocheurs pour savoir comment améliorer votre référencement? Tout le monde et son oncle semblent avoir un remède «magique» pour arriver en tête des résultats de recherche et transformer les impressions en conversions. Passer au crible tant de bruit sur le sujet peut nous faire manquer de véritables joyaux qui pourraient être juste sous notre nez.

Nous allons examiner un de ces joyaux dans cet article: données structurées.

Il y a une liste de contrôle du référencement incontournables que nous savons nécessaires lorsque vous travaillez sur un site. Il comprend des choses comme un fort </code>, une longue liste de <code><meta></code> balises et utilisation descriptive <code>alt</code> tags sur les images (ce qui est une double victoire pour l'accessibilité). L'exécution d'une vérification superficielle sur n'importe quel site à l'aide de Lighthouse signalera encore plus de conseils et de meilleures pratiques pour tirer le meilleur parti du référencement du contenu.</p> <p>Cependant, les moteurs de recherche deviennent plus intelligents et commencent à dépasser les techniques d'algorithme de grattage d'antan. Google, Amazon et Microsoft sont tous connus pour investir énormément dans l'apprentissage automatique, et avec cela, ils ont besoin de données propres pour alimenter leur IA de recherche. </p> <p>C’est là que le concept de schémas entre en jeu. En fait, c'est le financement de Google et Microsoft – avec Yahoo et Yandex – qui a conduit à la création de schema.org, un site Web et une communauté pour pousser leur format – plus communément appelé <strong>données structurées</strong> —En avant afin qu'eux-mêmes et d'autres moteurs de recherche puissent aider à faire apparaître le contenu de manière plus utile et engageante.</p> <h3>Alors, qu'est-ce que les données structurées?</h3> <p>Les données structurées décrivent le contenu des documents numériques (c'est-à-dire les sites Web, les e-mails, etc.). Il est utilisé partout sur le Web et, tout comme <code><meta</code>> tags, est une couche invisible d'informations que les moteurs de recherche utilisent pour lire le contenu.</p> <p>Les données structurées sont disponibles en trois versions: <strong>Microdonnées</strong>, <strong>RDFa </strong>et <strong>JSON-LD. </strong>Les microdonnées et RDF sont tous deux injectés directement dans les éléments HTML d'un document, parsemant chaque élément pertinent d'une page de pointeurs lisibles par machine. Par exemple, un exemple d'utilisation d'attributs de microdonnées sur un produit, tiré directement des documents schema.org:</p> <pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt"><div itemscope itemtype="http://schema.org/Product"> <span itemprop="name">Micro-ondes Kenmore blanc 17 "</span> <img itemprop="image" src="https://css-tricks.com/kenmore-microwave-17in.jpg" alt='Micro-ondes Kenmore 17 "' /> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> Classé <span itemprop="ratingValue">3,5</span>/ 5    basé sur <span itemprop="reviewCount">11</span> Avis des clients </div> <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <!--price is 1000, a number, with locale-specific thousands separator and decimal mark, and the $ character is marked up with the machine-readable code "USD" --> <span itemprop="priceCurrency" content="USD">$</span><span itemprop="price" content="1000.00">1.000,00</span> <link itemprop="availability" href="http://schema.org/InStock" />En stock </div> Description du produit: <span itemprop="description">Micro-ondes de comptoir de 0,7 pied cube.   Dispose de six catégories de cuisson prédéfinies et de fonctions pratiques telles que   Add-A-Minute et Child Lock.</span> Avis des clients: <div itemprop="review" itemscope itemtype="http://schema.org/Review"> <span itemprop="name">Pas un campeur heureux</span> -     par <span itemprop="author">Ellie</span>, <meta itemprop="datePublished" content="2011-04-01">1 avril 2011 <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> <meta itemprop="worstRating" content = "1"> <span itemprop="ratingValue">1</span>/ <span itemprop="bestRating">5</span>étoiles </div> <span itemprop="description">La lampe a grillé et maintenant je dois la remplacer     il. </span> </div> <div itemprop="review" itemscope itemtype="http://schema.org/Review"> <span itemprop="name">Achat de valeur</span> -     par <span itemprop="author">Lucas</span>, <meta itemprop="datePublished" content="2011-03-25">25 mars 2011 <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> <meta itemprop="worstRating" content = "1"/> <span itemprop="ratingValue">4</span>/ <span itemprop="bestRating">5</span>étoiles </div> <span itemprop="description">Super micro-ondes pour le prix. C'est petit et     s'inscrit dans mon appartement.</span> </div> <!-- etc. --> </div></code></pre> <p>Si cela ressemble à un balisage gonflé, c'est un peu le cas. Mais il est certainement avantageux si vous préférez consolider toutes vos données en un seul endroit.</p> <p>JSON-LD, d'autre part, se trouve généralement dans un <code><script></code> tag and describes the same properties in a single block of data. Again, from the docs:</p> <pre rel="JSON-LD" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt"><script type="application/ld+json"> {   "@context": "http://schema.org",   "@type": "Product",   "aggregateRating": {     "@type": "AggregateRating",     "ratingValue": "3.5",     "reviewCount": "11"   },   "description": "0.7 cubic feet countertop microwave. Has six preset cooking categories and convenience features like Add-A-Minute and Child Lock.",   "name": "Kenmore White 17" Microwave",   "image": "https://css-tricks.com/kenmore-microwave-17in.jpg",   "offers": {     "@type": "Offer",     "availability": "http://schema.org/InStock",     "price": "55.00",     "priceCurrency": "USD"   },   "review": (     {       "@type": "Review",       "author": "Ellie",       "datePublished": "2011-04-01",       "description": "The lamp burned out and now I have to replace it.",       "name": "Not a happy camper",       "reviewRating": {         "@type": "Rating",         "bestRating": "5",         "ratingValue": "1",         "worstRating": "1"       }     },     {       "@type": "Review",       "author": "Lucas",       "datePublished": "2011-03-25",       "description": "Great microwave for the price. It is small and fits in my apartment.",       "name": "Value purchase",       "reviewRating": {         "@type": "Rating",         "bestRating": "5",         "ratingValue": "4",         "worstRating": "1"       }     }   ) } </script></code></pre> <p>C'est ma préférence personnelle, car elle est traitée comme un petit manuel d'instructions externe pour votre contenu, un peu comme JavaScript pour les scripts et CSS pour vos styles, tous joyeusement autonomes. JSON-LD peut devenir essentiel pour certains types de schéma, où le contenu de la page est différent du contenu des données structurées (par exemple, consultez le <code>speakable</code> , actuellement en version bêta).</p> <p>Une introduction bienvenue à la mise en œuvre de JSON-LD sur le Web est l'autorisation de Google de récupérer des données structurées à partir d'une source externe, plutôt que de forcer les scripts en ligne, ce qui était auparavant frustrant impossible. Cela peut être fait par le développeur ou dans Google Tag Manager.</p> <h3>Que signifie pour vous les données structurées</h3> <p>Au-delà de faciliter la vie des robots des moteurs de recherche pour lire vos pages? Deux mots: <strong>Extraits riches</strong>. Les extraits enrichis sont des modules très visuels qui ont tendance à se situer en haut du moteur de recherche, dans ce qui est parfois appelé «Position 0» dans les résultats - affichés au-dessus du premier résultat de recherche. Voici un exemple de recherche simple de "tarte aux bleuets" dans Google à titre d'exemple:</p> <figure class="wp-block-image size-full"><img alt="Les résultats de recherche Google montrant trois recettes affichées sous forme de cartes en haut, une carte de faits nutritionnels dans la barre latérale droite, un premier résultat montrant les avis des utilisateurs et enfin, les résultats de la recherche." class="wp-image-310882 jetpack-lazy-image" data-recalc-dims="1" srcset="https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?w=1361&ssl=1 1361w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?resize=300%2C171&ssl=1 300w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?resize=1024%2C583&ssl=1 1024w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?resize=768%2C437&ssl=1 768w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?resize=1000%2C569&ssl=1 1000w" data-lazy-sizes="(min-width: 735px) 864px, 96vw" src="https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?ssl=1&is-pending-load=1"/><noscript><img src="https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?ssl=1" alt="Les résultats de recherche Google montrant trois recettes affichées sous forme de cartes en haut, une carte de faits nutritionnels dans la barre latérale droite, un premier résultat montrant les avis des utilisateurs et enfin, les résultats de la recherche." class="wp-image-310882" srcset="https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?w=1361&ssl=1 1361w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?resize=300%2C171&ssl=1 300w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?resize=1024%2C583&ssl=1 1024w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?resize=768%2C437&ssl=1 768w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/PxZhpbKc.png?resize=1000%2C569&ssl=1 1000w" sizes="(min-width: 735px) 864px, 96vw" data-recalc-dims="1"/></noscript><figcaption>Découvrez ces trois recettes en haut - et ce contenu dans la colonne de droite - apparaissant avant la liste des résultats en utilisant les détails des données structurées.</figcaption></figure> <p>Même le premier résultat est un extrait riche! Comme vous pouvez le voir, l'utilisation de données structurées est votre ticket pour entrer dans un extrait riche sur une page de résultats de recherche. Et, pour ne pas stimuler FOMO ou quoi que ce soit, mais tout site n'apparaissant pas dans un extrait riche est déjà à risque de tomber dans le territoire «en dessous du pli». Remarquez comment le deuxième résultat organique fait à peine la coupe.</p> <p>N'ayez crainte, chers développeurs! Ajouter et tester des données structurées sur un site Web est un processus simple et relativement indolore. Une fois que vous aurez compris, vous l'ajouterez à tous les emplacements possibles que vous pouvez imaginer, même aux e-mails.</p> <p>Il convient de noter que les données structurées ne sont pas le seul moyen d'accéder à des extraits riches. Les moteurs de recherche peuvent parfois déterminer suffisamment à partir de votre code HTML pour afficher certains extraits, mais son utilisation poussera les chances en votre faveur. De plus, l'utilisation de données structurées met la puissance de la façon dont votre contenu est affiché entre vos mains, plutôt que de laisser Google ou similaire le déterminer pour vous.</p> <h3>Types de données structurées</h3> <p>Les données structurées sont plus que des recettes. Voici une liste complète des types de données structurées prises en charge par Google. (Alerte spoiler: c'est presque n'importe quel type de contenu.)</p> <ul> <li>Article</li> <li>Livre (support limité)</li> <li>Miette de pain</li> <li>Carrousel</li> <li>Cours</li> <li>Annonces COVID-19 (bêta)</li> <li>Examen critique (assistance limitée)</li> <li>Base de données</li> <li>Note globale de l'employeur</li> <li>Salaire estimé</li> <li>un événement</li> <li>Vérification des faits</li> <li>FAQ</li> <li>Comment</li> <li>Métadonnées de licence d'image (bêta)</li> <li>Offre d'emploi</li> <li>Entreprise locale</li> <li>Logo</li> <li>Film</li> <li>Produit</li> <li>Q&R</li> <li>Recette</li> <li>Extrait d'avis</li> <li>Boîte de recherche Liens annexes</li> <li>Application logicielle</li> <li>Speakable (bêta)</li> <li>Abonnement et contenu payant</li> <li>Vidéo</li> </ul> <p>Oui, beaucoup d'options ici! Mais avec celles-ci, il y a de nombreuses opportunités d'améliorer le contenu d'un site et de tirer parti de ces fonctionnalités des moteurs de recherche.</p> <h3>Utiliser des données structurées</h3> <p>La manière la plus simple de trouver les bonnes données structurées pour votre projet consiste à parcourir le catalogue de recherche de Google. Les utilisateurs avancés peuvent aimer parcourir ce qui se trouve sur schema.org, mais je vous préviens que c'est un trou de lapin effrayant à parcourir.</p> <p>Commençons par un exemple assez simple: le <code>Logo</code> type de données du logo. C'est simple car tout ce dont nous avons vraiment besoin, c'est d'une URL de site Web et de l'URL source d'une image, ainsi que de quelques détails de base pour aider les moteurs de recherche à savoir qu'ils consultent un logo. Voici notre JSON-LD:</p> <pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt"><script type="application/ld+json">   {     "@context": "https://schema.org",     "@type": "Organization",     "name": "Example",     "url": "http://www.example.com",     "logo": "http://www.example.com/images/logo.png"   } </script></code></pre> <p>Tout d'abord, nous avons le <script> se taguer, indiquant aux moteurs de recherche qu'il est sur le point de consommer du JSON-LD.</p> <p>De là, nous avons cinq propriétés:</p> <ul> <li><strong><code>@context</code>:</strong> Ceci est inclus sur tous les objets de données structurés, quel que soit leur type. C’est ce qui indique aux moteurs de recherche que le JSON-LD contient des données définies par les spécifications schema.org.</li> <li><strong><code>@type</code>: </strong>Il s'agit du type de référence pour l'objet. Il sert à identifier le type de contenu avec lequel nous travaillons. Dans ce cas, c'est "Organisation" qui a tout un tas de sous-propriétés qui suivent.</li> <li><strong><code>name</code>:</strong> Il s'agit de la sous-propriété qui contient le nom de l'organisation.</li> <li><strong><code>url</code>: </strong>Il s'agit de la sous-propriété qui contient l'adresse Web de l'organisation.</li> <li><strong><code>logo</code>: </strong>Il s'agit de la sous-propriété qui contient le chemin d'accès au fichier image du logo de l'organisation. Pour que Google prenne cela en considération, il doit être d'au moins 112⨉112px et au format JPG, PNG ou GIF. Désolé, pas de SVG pour le moment.</li> </ul> <p>Une page peut avoir plusieurs types de données structurées. Cela signifie qu'il est possible de mélanger et de faire correspondre le contenu.</p> <h3>Test de données structurées</h3> <p>Vous voyez, déposer des données structurées dans une page n'est pas si difficile, non? Une fois que nous l'avons, nous devrions probablement vérifier si cela fonctionne réellement.</p> <p>Google, Bing et Yandex (connexion requise) ont tous des outils de test disponibles. Google en a même un spécifiquement pour valider les données structurées dans les e-mails. Dans la plupart des cas, déposez simplement l'URL du site Web et l'outil fera tourner un test et montrera quel objet il reconnaît, les propriétés qu'il voit et toutes les erreurs ou avertissements à examiner.</p> <figure class="wp-block-image size-full"><img alt="Affichage des résultats des tests de Google où le JSON-LD est affiché à gauche de l'écran et les détails à droite." class="wp-image-310883 jetpack-lazy-image" data-recalc-dims="1" srcset="https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/05/MXKc19mw.png?w=835&ssl=1 835w, https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/05/MXKc19mw.png?resize=300%2C207&ssl=1 300w, https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/05/MXKc19mw.png?resize=768%2C531&ssl=1 768w" data-lazy-sizes="(min-width: 735px) 864px, 96vw" src="https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/05/MXKc19mw.png?ssl=1&is-pending-load=1"/><noscript><img src="https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/05/MXKc19mw.png?ssl=1" alt="Affichage des résultats des tests de Google où le JSON-LD est affiché à gauche de l'écran et les détails à droite." class="wp-image-310883" srcset="https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/05/MXKc19mw.png?w=835&ssl=1 835w, https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/05/MXKc19mw.png?resize=300%2C207&ssl=1 300w, https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/05/MXKc19mw.png?resize=768%2C531&ssl=1 768w" sizes="(min-width: 735px) 864px, 96vw" data-recalc-dims="1"/></noscript><figcaption>L'outil de test de données structurées de Google récupère le balisage et affiche les informations qu'il reconnaît.</figcaption></figure> <p>L'étape suivante consiste à confirmer que les données structurées sont accessibles sur votre site en direct via Google Search Console. Vous devrez peut-être créer un compte et vérifier votre site afin d'utiliser la console d'un moteur de recherche particulier, mais la vérification des données est - encore une fois - aussi simple que d'ajouter une URL de site et d'utiliser les outils d'inspection pour vérifier que le site est bien vivre et envoyer des données lorsque le moteur de recherche y accède.</p> <p>Si les données structurées sont implémentées correctement, elles s'affichent. Dans le cas de Google, il se trouve dans la section "Améliorations" avec une grande coche à côté.</p> <figure class="wp-block-image size-full"><img alt="Capture d'écran de Google Search Console montrant que Google peut trouver le site et qu'il reconnaît les améliorations de recherche en dessous. Dans ce cas, cela montre que le type de données structurées Logo a été trouvé et est pris en charge." class="wp-image-310884 jetpack-lazy-image" data-recalc-dims="1" srcset="https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/pMwjz8aM.png?w=1023&ssl=1 1023w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/pMwjz8aM.png?resize=300%2C211&ssl=1 300w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/pMwjz8aM.png?resize=768%2C541&ssl=1 768w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/pMwjz8aM.png?resize=1000%2C705&ssl=1 1000w" data-lazy-sizes="(min-width: 735px) 864px, 96vw" src="https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/pMwjz8aM.png?ssl=1&is-pending-load=1"/><noscript><img src="https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/pMwjz8aM.png?ssl=1" alt="Capture d'écran de Google Search Console montrant que Google peut trouver le site et qu'il reconnaît les améliorations de recherche en dessous. Dans ce cas, cela montre que le type de données structurées Logo a été trouvé et est pris en charge." class="wp-image-310884" srcset="https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/pMwjz8aM.png?w=1023&ssl=1 1023w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/pMwjz8aM.png?resize=300%2C211&ssl=1 300w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/pMwjz8aM.png?resize=768%2C541&ssl=1 768w, https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/05/pMwjz8aM.png?resize=1000%2C705&ssl=1 1000w" sizes="(min-width: 735px) 864px, 96vw" data-recalc-dims="1"/></noscript><figcaption>Remarquez le «Logo» qui est détecté à la fin - cela fonctionne!</figcaption></figure> <h3>Mais attendez! J'ai fait tout ça et rien ne se passe… qu'est-ce qui donne?</h3> <p>Comme pour toutes les optimisations des moteurs de recherche, il n'y a pas de garanties ni d'échelles de temps, quand il s'agit de savoir comment ou quand les données structurées sont utilisées. Cela peut prendre un certain temps avant que des extraits riches ne prennent possession de votre contenu - des jours, des semaines, voire des mois! Je sais, ça pue d'être laissé dans le noir comme ça. C'est malheureusement un jeu d'attente.</p> <hr class="wp-block-separator"/> <p>Espérons que cela vous donne une bonne idée de ce que sont les données structurées et de la façon dont elles peuvent être utilisées pour tirer parti des fonctionnalités que les moteurs de recherche ont créées pour mettre en avant le contenu.</p> <p>Les conseils, astuces et astuces ne manquent absolument pas pour aider à optimiser un site pour les moteurs de recherche. Bien qu’elle soit en grande partie préoccupée par ce qui est contenu dans le <head> ou comment le contenu est écrit, il y a des choses pratiques que les développeurs peuvent faire pour avoir un impact. Les données structurées sont certainement l'une de ces choses et méritent d'être explorées pour tirer le meilleur parti du contenu.</p> <p>Le monde est votre huître avec des données structurées. Et, bien sûr, bien que les moteurs de recherche ne prennent en charge qu'une sélection du vocabulaire schema.org, ils évoluent et étendent constamment ce support. Pourquoi ne pas commencer petit en ajoutant des données structurées à un lien e-mail dans une newsletter? Ou peut-être que vous souhaitez essayer quelque chose de différent, comme définir une zone de recherche de liens annexes (qui est très méta mais très cool). Ou, hé, ajoutez une recette pour Pinterest. Tarte aux myrtilles, quelqu'un? </p> </div> </div><!-- .entry-content --> </div><!-- .post-inner --> <div class="section-inner"> <div class="post-meta-wrapper post-meta-single post-meta-single-bottom"> <ul class="post-meta"> <li class="post-tags meta-wrapper"> <span class="meta-icon"> <span class="screen-reader-text">Étiquettes</span> <svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill="" d="M15.4496399,8.42490555 L8.66109799,1.63636364 L1.63636364,1.63636364 L1.63636364,8.66081885 L8.42522727,15.44178 C8.57869221,15.5954158 8.78693789,15.6817418 9.00409091,15.6817418 C9.22124393,15.6817418 9.42948961,15.5954158 9.58327627,15.4414581 L15.4486339,9.57610048 C15.7651495,9.25692435 15.7649133,8.74206554 15.4496399,8.42490555 Z M16.6084423,10.7304545 L10.7406818,16.59822 C10.280287,17.0591273 9.65554997,17.3181054 9.00409091,17.3181054 C8.35263185,17.3181054 7.72789481,17.0591273 7.26815877,16.5988788 L0.239976954,9.57887876 C0.0863319284,9.4254126 0,9.21716044 0,9 L0,0.818181818 C0,0.366312477 0.366312477,0 0.818181818,0 L9,0 C9.21699531,0 9.42510306,0.0862010512 9.57854191,0.239639906 L16.6084423,7.26954545 C17.5601275,8.22691012 17.5601275,9.77308988 16.6084423,10.7304545 Z M5,6 C4.44771525,6 4,5.55228475 4,5 C4,4.44771525 4.44771525,4 5,4 C5.55228475,4 6,4.44771525 6,5 C6,5.55228475 5.55228475,6 5,6 Z" /></svg> </span> <span class="meta-text"> <a href="http://www.maclasseweb.fr/tag/ameliorer" rel="tag">améliorer</a>, <a href="http://www.maclasseweb.fr/tag/des" rel="tag">des</a>, <a href="http://www.maclasseweb.fr/tag/donnees" rel="tag">données</a>, <a href="http://www.maclasseweb.fr/tag/l39optimisation" rel="tag">l39optimisation</a>, <a href="http://www.maclasseweb.fr/tag/moteurs" rel="tag">moteurs</a>, <a href="http://www.maclasseweb.fr/tag/pour" rel="tag">pour</a>, <a href="http://www.maclasseweb.fr/tag/recherche" rel="tag">Recherche</a>, <a href="http://www.maclasseweb.fr/tag/structurees" rel="tag">structurées</a>, <a href="http://www.maclasseweb.fr/tag/utilisation" rel="tag">Utilisation</a> </span> </li> </ul><!-- .post-meta --> </div><!-- .post-meta-wrapper --> </div><!-- .section-inner --> <nav class="pagination-single section-inner" aria-label="Article" role="navigation"> <hr class="styled-separator is-style-wide" aria-hidden="true" /> <div class="pagination-single-inner"> <a class="previous-post" href="http://www.maclasseweb.fr/comment-se-sentir-plus-energique-meme-lorsque-vous-etes-coince-a-un-bureau-toute-la-journee-smashing-magazine"> <span class="arrow" aria-hidden="true">←</span> <span class="title"><span class="title-inner">Comment se sentir plus énergique même lorsque vous êtes coincé à un bureau toute la journée – Smashing Magazine</span></span> </a> <a class="next-post" href="http://www.maclasseweb.fr/comment-detourner-du-trafic-en-utilisant-ip2location-dans-un-site-web-next-js-sitepoint"> <span class="arrow" aria-hidden="true">→</span> <span class="title"><span class="title-inner">Comment détourner du trafic en utilisant IP2Location dans un site Web Next.js – SitePoint</span></span> </a> </div><!-- .pagination-single-inner --> <hr class="styled-separator is-style-wide" aria-hidden="true" /> </nav><!-- .pagination-single --> <div class="comments-wrapper section-inner"> <div id="respond" class="comment-respond"> <h2 id="reply-title" class="comment-reply-title">Laisser un commentaire <small><a rel="nofollow" id="cancel-comment-reply-link" href="/utilisation-de-donnees-structurees-pour-ameliorer-loptimisation-des-moteurs-de-recherche#respond" style="display:none;">Annuler la réponse</a></small></h2><form action="http://www.maclasseweb.fr/wp-comments-post.php" method="post" id="commentform" class="section-inner thin max-percentage" novalidate><p class="comment-notes"><span id="email-notes">Votre adresse de messagerie ne sera pas publiée.</span> Les champs obligatoires sont indiqués avec <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Commentaire</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Nom <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">Adresse de messagerie <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> <p class="comment-form-url"><label for="url">Site web</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Enregistrer mon nom, mon e-mail et mon site web dans le navigateur pour mon prochain commentaire.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Laisser un commentaire" /> <input type='hidden' name='comment_post_ID' value='992' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- .comments-wrapper --> </article><!-- .post --> </main><!-- #site-content --> <div class="footer-nav-widgets-wrapper header-footer-group"> <div class="footer-inner section-inner"> <aside class="footer-widgets-outer-wrapper" role="complementary"> <div class="footer-widgets-wrapper"> <div class="footer-widgets column-one grid-item"> <div class="widget widget_text"><div class="widget-content"><h2 class="widget-title subheading heading-size-3">Nos partenaires</h2> <div class="textwidget"><p><a href="https://10-raisons.fr/internet/">Toute l’actualité du web</a></p> </div> </div></div> </div> <div class="footer-widgets column-two grid-item"> <div class="widget widget_recent_entries"><div class="widget-content"> <h2 class="widget-title subheading heading-size-3">Articles récents</h2> <ul> <li> <a href="http://www.maclasseweb.fr/faire-un-petit-moi-partie-1">Faire un petit moi – Partie 1.</a> </li> <li> <a href="http://www.maclasseweb.fr/20-modeles-de-couleurs-powerpoint-elegants">20 modèles de couleurs PowerPoint élégants</a> </li> <li> <a href="http://www.maclasseweb.fr/noubliez-jamais-un-commentaire-todo-avec-tickgit-le-chef-de-projet-de-votre-referentiel">N'oubliez jamais un commentaire TODO avec tickgit, le chef de projet de votre référentiel</a> </li> <li> <a href="http://www.maclasseweb.fr/rendre-jamstack-lent-defi-accepte">Rendre Jamstack lent? Défi accepté.</a> </li> <li> <a href="http://www.maclasseweb.fr/une-introduction-a-stimulus-js-smashing-magazine">Une introduction à Stimulus.js – Smashing Magazine</a> </li> <li> <a href="http://www.maclasseweb.fr/comment-creer-une-carte-de-conference-animee-a-laide-de-css">Comment créer une carte de conférence animée à l'aide de CSS</a> </li> <li> <a href="http://www.maclasseweb.fr/20-meilleures-polices-geometriques-2020-gratuites-et-premium">20+ meilleures polices géométriques 2020 (gratuites et premium)</a> </li> <li> <a href="http://www.maclasseweb.fr/les-concepteurs-ne-tiennent-pas-assez-souvent-leurs-carnets-de-croquis">Les concepteurs ne tiennent pas assez souvent leurs carnets de croquis</a> </li> <li> <a href="http://www.maclasseweb.fr/pourquoi-flippa-est-le-meilleur-endroit-pour-vendre-votre-site-web">Pourquoi Flippa est le meilleur endroit pour vendre votre site Web</a> </li> <li> <a href="http://www.maclasseweb.fr/trois-alternatives-css-a-la-navigation-javascript">Trois alternatives CSS à la navigation JavaScript</a> </li> <li> <a href="http://www.maclasseweb.fr/obtenez-des-certificats-ssl-gratuits-de-zerossl">Obtenez des certificats SSL gratuits de ZeroSSL</a> </li> <li> <a href="http://www.maclasseweb.fr/smashingconf-entierement-en-ligne-pour-2020-smashing-magazine">SmashingConf entièrement en ligne pour 2020 – Smashing Magazine</a> </li> <li> <a href="http://www.maclasseweb.fr/le-moyen-le-plus-simple-de-collecter-et-de-gerer-les-commentaires-sur-le-site-web">Le moyen le plus simple de collecter et de gérer les commentaires sur le site Web</a> </li> <li> <a href="http://www.maclasseweb.fr/tendance-de-conception-des-images-de-heros-fortes-avec-un-texte-subtil">Tendance de conception: des images de héros fortes avec un texte subtil</a> </li> <li> <a href="http://www.maclasseweb.fr/la-refonte-de-votre-application-mobile-est-elle-une-mauvaise-idee-smashing-magazine">La refonte de votre application mobile est-elle une mauvaise idée? – Smashing Magazine</a> </li> <li> <a href="http://www.maclasseweb.fr/20-meilleurs-modeles-de-titres-final-cut-pro-2020-titres-fcp">20+ meilleurs modèles de titres Final Cut Pro 2020 (titres FCP)</a> </li> <li> <a href="http://www.maclasseweb.fr/quest-ce-que-gatsby-smashing-magazine">Qu'est-ce que Gatsby? – Smashing Magazine</a> </li> <li> <a href="http://www.maclasseweb.fr/7-problemes-courants-de-conception-de-sites-web-et-comment-les-expliquer-aux-clients">7 problèmes courants de conception de sites Web (et comment les expliquer aux clients)</a> </li> <li> <a href="http://www.maclasseweb.fr/execution-efficace-dinstances-ponctuelles-avec-amazon-eks">Exécution efficace d'instances ponctuelles avec Amazon EKS</a> </li> <li> <a href="http://www.maclasseweb.fr/17-animations-pure-pure-css">17 animations Pure Pure CSS</a> </li> <li> <a href="http://www.maclasseweb.fr/50-meilleurs-modeles-premiere-pro-2020">50+ meilleurs modèles Premiere Pro 2020</a> </li> <li> <a href="http://www.maclasseweb.fr/confrontation-de-themes-wordpress-custom-built-vs-readymade">Confrontation de thèmes WordPress: Custom Built vs Readymade</a> </li> <li> <a href="http://www.maclasseweb.fr/ce-que-vous-devez-savoir-sitepoint">Ce que vous devez savoir – SitePoint</a> </li> <li> <a href="http://www.maclasseweb.fr/de-nouveaux-outils-passionnants-pour-les-concepteurs-juillet-2020">De nouveaux outils passionnants pour les concepteurs, juillet 2020</a> </li> <li> <a href="http://www.maclasseweb.fr/fonctionnalites-de-la-plateforme-web-de-financement-participatif-avec-priorisation-ouverte-smashing-magazine">Fonctionnalités de la plateforme Web de financement participatif avec priorisation ouverte – Smashing Magazine</a> </li> <li> <a href="http://www.maclasseweb.fr/obtenez-des-donnees-de-marche-en-temps-reel-avec-marketstack">Obtenez des données de marché en temps réel avec Marketstack</a> </li> <li> <a href="http://www.maclasseweb.fr/comment-creer-un-crochet-react-personnalise-pour-recuperer-et-mettre-en-cache-des-donnees-smashing-magazine">Comment créer un crochet React personnalisé pour récupérer et mettre en cache des données – Smashing Magazine</a> </li> <li> <a href="http://www.maclasseweb.fr/10-interfaces-utilisateur-gratuites-integrees-avec-css-et-javascript">10 interfaces utilisateur gratuites intégrées avec CSS et JavaScript</a> </li> <li> <a href="http://www.maclasseweb.fr/les-astuces-et-solutions-de-conception-web-les-plus-populaires-de-tous-les-temps">Les astuces et solutions de conception Web les plus populaires de tous les temps</a> </li> <li> <a href="http://www.maclasseweb.fr/comment-ajouter-des-polices-a-indesign-et-les-utiliser-dans-vos-projets">Comment ajouter des polices à InDesign et les utiliser dans vos projets</a> </li> <li> <a href="http://www.maclasseweb.fr/nous-avons-besoin-de-mesures-de-performances-web-plus-inclusives">Nous avons besoin de mesures de performances Web plus inclusives</a> </li> <li> <a href="http://www.maclasseweb.fr/transitions-css-dans-vuejs-et-nuxtjs-smashing-magazine">Transitions CSS dans Vuejs et Nuxtjs – Smashing Magazine</a> </li> <li> <a href="http://www.maclasseweb.fr/30-meilleures-polices-pour-affiches">30+ meilleures polices pour affiches</a> </li> <li> <a href="http://www.maclasseweb.fr/an-eleventy-starter-avec-tailwind-css-et-alpine-js">An Eleventy Starter avec Tailwind CSS et Alpine.js</a> </li> <li> <a href="http://www.maclasseweb.fr/8-secrets-de-conception-des-sites-web-b2b-vs-b2c">8 secrets de conception des sites Web B2B vs B2C</a> </li> <li> <a href="http://www.maclasseweb.fr/une-sortie-de-livre-pour-click-et-une-chance-de-repenser-nos-routines-smashing-magazine">Une sortie de livre pour Click! Et une chance de repenser nos routines – Smashing Magazine</a> </li> <li> <a href="http://www.maclasseweb.fr/des-images-de-fond-floral-a-ne-pas-manquer">Des images de fond floral à ne pas manquer</a> </li> <li> <a href="http://www.maclasseweb.fr/plus-de-20-modeles-de-maquette-de-sac-a-cafe-gratuits-et-premium">Plus de 20 modèles de maquette de sac à café (gratuits et premium)</a> </li> <li> <a href="http://www.maclasseweb.fr/nouvelles-hebdomadaires-pour-les-concepteurs-%e2%84%96-548">Nouvelles hebdomadaires pour les concepteurs № 548</a> </li> <li> <a href="http://www.maclasseweb.fr/frontity-is-react-pour-wordpress">Frontity is React pour WordPress</a> </li> </ul> </div></div> </div> </div><!-- .footer-widgets-wrapper --> </aside><!-- .footer-widgets-outer-wrapper --> </div><!-- .footer-inner --> </div><!-- .footer-nav-widgets-wrapper --> <footer id="site-footer" role="contentinfo" class="header-footer-group"> <div class="section-inner"> <div class="footer-credits"> <p class="footer-copyright">© 2020 <a href="http://www.maclasseweb.fr/">Apprendre le marketing sur le net</a> </p><!-- .footer-copyright --> <p class="powered-by-wordpress"> <a href="https://fr.wordpress.org/"> </a> </p><!-- .powered-by-wordpress --> </div><!-- .footer-credits --> <a class="to-the-top" href="#site-header"> <span class="to-the-top-long"> Vers le haut <span class="arrow" aria-hidden="true">↑</span> </span><!-- .to-the-top-long --> <span class="to-the-top-short"> Haut <span class="arrow" aria-hidden="true">↑</span> </span><!-- .to-the-top-short --> </a><!-- .to-the-top --> </div><!-- .section-inner --> </footer><!-- #site-footer --> <script src='http://www.maclasseweb.fr/wp-includes/js/comment-reply.min.js?ver=5.4.2'></script> <script src='http://www.maclasseweb.fr/wp-includes/js/wp-embed.min.js?ver=5.4.2'></script> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> </body> </html>