Comment vérifier et générer des balises META pour votre site Web

Dans cette astuce, je vais vous présenter un outil simple mais très utile appelé Hey Meta. Si vous êtes intéressé par le profil de partage de votre site Web et que vous souhaitez vous assurer que les balises méta que vous utilisez sont correctes, Hey Meta est exactement ce dont vous avez besoin. Plongeons dedans!

Obtenez vos balises méta droite

 

Vérifiez vos balises méta

Vérifiez l'efficacité de la configuration actuelle des balises méta de votre site Web en entrant l'URL dans le champ de saisie. Un aperçu de la carte sociale (ce qui est susceptible d’être affiché sur les réseaux sociaux, les applications de partage, etc.) ainsi que le titre, la description, l’image sélectionnée de l’URL en question vous.

Entrez l'URL ici

Si votre page Web ne contient pas de balises META pour ces éléments, rien ne s'affiche..

Générer les balises méta correctes

Si votre page semble avoir des détails manquants ou des métadonnées incorrectes (ou sous-optimales), vous pouvez utiliser Hey Meta pour générer les balises correctes pour vous. Entrez les informations que vous souhaitez afficher dans les champs indiqués:

Entrez le titre ici

La même chose peut être faite pour la description du site, l'URL et l'image sélectionnée. Les balises générées seront affichées dans les aperçus et le balisage ressemblera à ceci:

 Site de test                 

Ici, vous verrez les balises méta HTML natives comme </code>, Les tags Twitter et les tags Open Graph comme <code><meta property="og:title"></code> qui permettent un partage social approprié. Ces tags peuvent ensuite être placés dans le <code><head></code> de votre document HTML.</p><h2>Conclusion</h2><p>Assurez-vous que vos balises META affichent correctement les détails de votre site Web.!</p><h3>Lectures complémentaires</h3> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/webdesign">Création de sites web</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/photography/how-to-check-for-correct-skin-tones-in-video-with-adobe-premiere-pro.html">Comment vérifier si les tons de peau sont corrects dans une vidéo avec Adobe Premiere Pro</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_2/how-to-check-for-correct-skin-tones-in-video-with-adobe-premiere-pro_2.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/business/how-to-charge-premium-prices-and-write-winning-proposals.html">Comment facturer des prix plus élevés et rédiger des propositions gagnantes</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_10/how-to-charge-premium-prices-and-write-winning-proposals.png');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">fr.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informations intéressantes et conseils utiles sur la programmation. Développement de sites Web, conception de sites Web et développement Web. Tutoriels Photoshop. Création de jeux informatiques et d'applications mobiles. Devenez un programmeur professionnel à partir de zéro. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Chercher..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>