So prüfen und generieren Sie Meta-Tags für Ihre Website

In diesem kurzen Tipp möchte ich Ihnen ein einfaches, aber sehr nützliches Werkzeug namens Hey Meta vorstellen. Wenn Sie wissen möchten, wie das Freigabeprofil Ihrer Website aussieht, und Sie möchten sicherstellen, dass die verwendeten Meta-Tags korrekt sind, ist Hey Meta genau das, was Sie brauchen. Lass uns eintauchen!

Erhalten Sie Ihre Meta-Tags richtig

 

Überprüfen Sie Ihre Meta-Tags

Überprüfen Sie die Wirksamkeit des aktuellen Meta-Tags Ihrer Website, indem Sie die URL in das Eingabefeld eingeben. Sie erhalten eine Vorschau der Sozialkarte (was wahrscheinlich in sozialen Netzwerken angezeigt wird, Apps teilen usw.) und den Titel, die Beschreibung und das Bild der betreffenden URL.

URL hier eingeben

Wenn Ihre Webseite keine Meta-Tags für diese Elemente enthält, wird nichts angezeigt.

Generieren Sie korrekte Metatags

Wenn auf Ihrer Seite scheinbar Details fehlen oder falsche (oder nicht optimale) Metadaten angezeigt werden, können Sie mit Hey Meta die richtigen Tags für Sie generieren. Geben Sie in die angezeigten Felder die Informationen ein, die Sie anzeigen möchten:

Geben Sie hier den Titel ein

Dasselbe kann für die Beschreibung der Website, die URL und das vorgestellte Bild gemacht werden. Die generierten Tags werden in der Vorschau angezeigt und das Markup sieht etwa so aus:

 Website testen                 

Hier sehen Sie die nativen HTML-Meta-Tags wie </code>, Twitter-Tags und die Open Graph-Tags mögen <code><meta property="og:title"></code> die einen richtigen sozialen Austausch ermöglichen. Diese Tags können dann in der platziert werden <code><head></code> Ihres HTML-Dokuments.</p><h2>Fazit</h2><p>Stellen Sie sicher, dass Ihre Meta-Tags Ihre Website-Details richtig anzeigen!</p><h3>Lesen Sie weiter</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">Web-Design</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">So prüfen Sie mit Adobe Premiere Pro nach korrekten Hauttönen in Videos</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">So berechnen Sie Premium-Preise und schreiben gewinnende Vorschläge</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="/">accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessante Informationen und nützliche Tipps zur Programmierung. Website-Entwicklung, Webdesign und Webentwicklung. Photoshop-Tutorials. Erstellung von Computerspielen und mobilen Anwendungen. Werden Sie von Grund auf professioneller Programmierer. </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="Suche..."> <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>