{"id":320,"date":"2018-05-15T19:34:18","date_gmt":"2018-05-15T17:34:18","guid":{"rendered":"https:\/\/ekiwi.de\/?p=320"},"modified":"2018-05-15T19:34:18","modified_gmt":"2018-05-15T17:34:18","slug":"rel-attribute-fuer-bessere-html-links","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/320\/rel-attribute-fuer-bessere-html-links\/","title":{"rendered":"rel-Attribute f\u00fcr bessere HTML-Links"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/index.php\/320\/rel-attribute-fuer-bessere-html-links\/#Das_rel-Attribut\" >Das rel-Attribut<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/index.php\/320\/rel-attribute-fuer-bessere-html-links\/#Alternate\" >Alternate<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ekiwi.de\/index.php\/320\/rel-attribute-fuer-bessere-html-links\/#Author\" >Author<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ekiwi.de\/index.php\/320\/rel-attribute-fuer-bessere-html-links\/#Bookmark\" >Bookmark<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ekiwi.de\/index.php\/320\/rel-attribute-fuer-bessere-html-links\/#Help\" >Help<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ekiwi.de\/index.php\/320\/rel-attribute-fuer-bessere-html-links\/#License\" >License<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ekiwi.de\/index.php\/320\/rel-attribute-fuer-bessere-html-links\/#Noopener\" >Noopener<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ekiwi.de\/index.php\/320\/rel-attribute-fuer-bessere-html-links\/#Nofollow\" >Nofollow<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/ekiwi.de\/index.php\/320\/rel-attribute-fuer-bessere-html-links\/#Noreferrer\" >Noreferrer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/ekiwi.de\/index.php\/320\/rel-attribute-fuer-bessere-html-links\/#Prefetch\" >Prefetch<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/ekiwi.de\/index.php\/320\/rel-attribute-fuer-bessere-html-links\/#Next_und_Prev\" >Next und Prev<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/ekiwi.de\/index.php\/320\/rel-attribute-fuer-bessere-html-links\/#Search\" >Search<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/ekiwi.de\/index.php\/320\/rel-attribute-fuer-bessere-html-links\/#Tag\" >Tag<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/ekiwi.de\/index.php\/320\/rel-attribute-fuer-bessere-html-links\/#Fazit\" >Fazit<\/a><\/li><\/ul><\/nav><\/div>\n<p>Links sind seit HTML 5 nicht mehr nur Links. Mit dem rel-Attribut, was immer noch h\u00e4ufig vergessen wird, gibt man seinen Links Struktur und semantische Bedeutung. Das Attribut wird, je nach Art, von Browser und Suchmaschinen verwendet um den Kontext des Links besser zu verstehen. Schauen wir uns deshalb die Attribute im Detail an.<\/p>\n<p><!--more--><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Das_rel-Attribut\"><\/span>Das rel-Attribut<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Das Attribut wird dem Link einfach im HTML-Code hinzugef\u00fcgt. Es ist optional. Hier ein Beispiel f\u00fcr einen &#8222;nofollow&#8220;-Link:<\/p>\n<pre>&lt;a href=&quot;http:\/\/example.com&quot; rel=&quot;nofollow&quot;&gt;Link&lt;\/a&gt;<\/pre>\n<p>Gro\u00df-Kleinschreibung ist an der Stelle egal. Auch mehrere Attribute sind m\u00f6glich und werden mittels Leerzeichen getrennt. Insgesamt stehen ein Dutzend verschiedene Attribute zur Verf\u00fcgung.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Alternate\"><\/span>Alternate<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Alternate beschreibt einen Link zu einem Dokument mit gleichem Inhalt, aber anderer Darbietung, der Klassiker sind hier die Druckansicht ohne die Schn\u00f6rkel der Webseite oder ein PDF. Suchmaschinen k\u00f6nnen so erkennen, dass es sich hierbei um keine doppelten Inhalte handelt.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Author\"><\/span>Author<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Author beschreibt einen Link zur Seite des Autors. Das kann das Profil im Blog ein, die \u00dcber Mich Seite.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Bookmark\"><\/span>Bookmark<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bookmark ist ein schwieriger Kandidat. Entgegen dem Namen wird bei Klick auf einen solchen Link kein Bookmark angelegt. Der Verweis soll eher dazu dienen einen permanenten Link auf die \u00fcbergeordnete Ebene zu erstellen. Dies kann z.B. ein Link innerhalb des Kapitels zum Anfang des Kapitels mit \u00dcberschrift angesehen werden.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Help\"><\/span>Help<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Kennzeichnet eine Hilfe-Seite. Verweise mit kontextbasierter Hilfe w\u00e4ren hier als Beispiel zu nennen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"License\"><\/span>License<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Verweist auf die Lizenz der Seite, z.B. den Lizenztext unter der das aktuelle Dokument ver\u00f6ffentlich worden ist.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Noopener\"><\/span>Noopener<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Noopener dient zum Absichern von Links. Links zu anderen Webseiten, welche mit &#8222;target=_blank&#8220; aufgerufen werden, sollten zus\u00e4tzlich noch das rel-Attribut &#8222;noopener&#8220; zugewiesen bekommen. Hintergrund ist, dass ansonsten die aufgerufene Seite \u00fcber Java-Script Zugriff auf die urspr\u00fcngliche Seite bekommt und so z.B. Elemente austauschen kann. Dies kann dann beispielsweise f\u00fcr Phishing Attacken verwendet werden.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Nofollow\"><\/span>Nofollow<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Nofollow hatten wir bereits im ersten Beispiel gesehen. Es durfte wohl einer der am Meisten verwendeten rel-Eigenschaften sein. Kurz gesagt, verlinkt man hier Inhalte, die nichts mit dem Text an sich zu tun haben. Suchmaschinen wird so gesagt: hey das ist ein Werbelink, der nix mit dem Text zu tun hat. Dies wird auch gerne verwendet, um Links in Kommentaren zu kennzeichen, welche mit dem eigentlichen Text nicht unbedingt etwas zu tun haben und auch gerne f\u00fcr Spam verwendet werden.<\/p>\n<p>Suchmaschinen k\u00f6nnen somit solche Links ausfiltern und damit verhindert man potentielle Abwertungen von Suchmaschinen, welche Links als Werbung einstufen. Google m\u00f6chte beispielsweise, dass man Werbelinks auf diese Art kennzeichnet.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Noreferrer\"><\/span>Noreferrer<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Normalerweise wird beim Klick auf den Link der Referrer mitgeschickt. Dies sagt der aufgerufenen Webseite, von welcher Seite der Benutzer kommt. Dies erlaubt spannende statistische Auswertungen, da man sehen kann, welche Webseiten auf einen Linken. Doch nicht immer m\u00f6chte man diese Information mitgeben. Wer das nicht m\u00f6chte setzt dieses Wert.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Prefetch\"><\/span>Prefetch<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Weist Browser an, das verlinkte Dokument zu cachen. Kann z.B. bei Bildern sinnvoll sein, oder bei Dokumenten die der Benutzer mit gro\u00dfer Sicherheit anschlie\u00dfend anschauen wird.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Next_und_Prev\"><\/span>Next und Prev<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Kennzeichnet z.B. die n\u00e4chste oder die vorhergehende Seite in meinem mehrzeiligen Artikel.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Search\"><\/span>Search<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Link zur Suchm\u00f6glichkeit f\u00fcr eine Webseite. Idealerweise verweist man hier auf die Suchfunktion vom Blog oder der Webseite.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tag\"><\/span>Tag<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Verlinkt ein Schlagwort f\u00fcr eine Webseite. Dies kann z.B. in Blogs verwendet werden um thematisch auf eine Rubrik oder ein Tag zu verweisen.<\/p>\n<h1><span class=\"ez-toc-section\" id=\"Fazit\"><\/span>Fazit<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>Nicht jeden Attribut wird man oft brauchen, aber das rel-Attribut erlaubt Links syntaktisch besser einzuordnen. Einige Elemente sorgen f\u00fcr saubere Verlinkung von Kommentaren und Benutzerinhalten. Andere erlauben die bessere Indizierung bei Google, was sich hoffentlich auch in einem besseren Ranking auswirkt. Deswegen beim Link-Setzen drauf achten!<br \/>\nModerne Browser unterst\u00fctzen mittlerweile alle Varianten.<\/p>","protected":false},"excerpt":{"rendered":"<p>Links sind seit HTML 5 nicht mehr nur Links. Mit dem rel-Attribut, was immer noch h\u00e4ufig vergessen wird, gibt man<\/p>\n","protected":false},"author":1,"featured_media":55,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[5],"tags":[22,65,66],"class_list":["post-320","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl","tag-css","tag-links","tag-seo"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=320"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/320\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/55"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}