SEO: Links zusammenfassen mit HTML und CSS

SEO Tutorial: Wie man mit semantischem HTML Code und CSS eine interne Mehrfachverlinkung aus Teaserboxen vermeiden und sogar auf Javascript verzichten kann.

SEO: Links zusammenfassen mit HTML und CSS

Christoph Baur hatte letzte Woche auf SEO Book einen Artikel veröffentlich und gezeigt, wie man bei der internen Verlinkung auf Kategorie- und Übersichtsseiten auf mehrfaches Verlinken mit Hilfe von HTML, CSS und jQuery verzichten kann.


Was darauf folgte, war eine teils heftige Diskussion über semantischen Code, die Frage ob neben einem SEO auch ein Frontendentwickler zu Rate gezogen wurde und dem Hinweis, dass man mit HTML5 ja auf Javascript bzw. jQuery auch verzichten kann, in dem man einfach um den ganzen Block den Link packt.


Das könnte jedoch, je nach verwendetem Code wieder Fehler im Markup Check bei W3C hervorrufen und zwar dann, wenn Block Elemente innerhalb von inline Elementen platziert werden. Möchte man also bei dem Inhalt, den man verlinkt auch noch eine Überschrift verwenden, ist mit dem "Wir packen den Link einfach um alles" auch schon Schluss mit der Semantik im Code.


Trotzdem gibt es eine Möglichkeit die Verlinkung nur einmal vorzunehmen, Semantik zu wahren, kein Javascript zu verwenden und trotzdem den Link über die komplette Box zu legen. Wie das funktioniert zeige ich an Hand der Blog Eintragsboxen der Startseite von angelmedia.de


<!DOCTYPEhtml>
 <html>
 <head>
 <title>Links zusammenfassen</title>
 </head>
 <body>
 <article>
 <a href="mein-link"title="SEO Link-Title">
 <figure>
 <img alt="mein Image ALT" title="SEO Title" src="meine Image URL">
 <figcaption>SEO Figcaption</figcaption>
 </figure>
 </a>
 <div>
 <h3>SEO Headline</h3>
 <p>SEO: Suchmaschinen Optimierter Teasertext</p>
 </div>
 </article>
 </body>
</html>


Da ein Figure Tag jedes Element als Elternelement haben darf, was zur Gruppe der Flow Content Elemente gehört, und der Link-Tag zu dieser Gruppe gehört, ist es unproblematisch den kompletten Figure Tag zu verlinken.


article {
   min-height: 300px;
   position: relative;
    width: 300px;
   background-color: #DEDEDE;
 }

article figcaption {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   opacity: 0;
   text-align: center;
   line-height: 300px;
   background-color: #d9d9d9;
   background: rgba(255, 255, 255, 0.7);
   background-repeat: no-repeat;
   background-position: 50%;
   z-index: 1;
}

article:hover figcaption {
   opacity: 1;
   font-weight: normal;
}


Der CSS Code beschränkt sich rein darauf, das figcaption Element per :hover on Top zu bekommen und somit den Link über die komplette Box zu legen. Auf weiteres Styling habe ich in dem Beispiel verzichtet, da das nur unnötiger Overhead wäre.


Mit Sicherheit gibt es auch noch andere Wege, komplette Boxen zu verlinken, ohne die Semantik aus den Augen zu verlieren oder mehrfach Links zu platzieren, weswegen dies nur ein Ansatz sein soll, wie man das Problem der internen Mehrfachverlinkung lösen und auf Javascript kann.


UPDATE: Ich habe eine kleine Demo online gestellt.