H1-Text durch ein Logo ersetzen: Beste Methode für SEO und Barrierefreiheit?

Es scheint, als gäbe es ein paar verschiedene Techniken, also hatte ich gehofft, eine "endgültige" Antwort darauf zu bekommen ...

Auf einer Website ist es üblich, ein Logo zu erstellen, das auf die Homepage verweist. Ich möchte das Gleiche tun und gleichzeitig am besten für Suchmaschinen, Bildschirmleseprogramme, IE 6+ und Browser optimieren, die CSS und / oder Bilder deaktiviert haben.

Beispiel 1: Verwendet kein h1-Tag. Nicht so gut für SEO, oder?

<div id="logo">
    <a href="">
        <img src="logo.png" alt="Stack Overflow" />
    </a>
</div>

Beispiel 2: Ich habe das irgendwo gefunden. Das CSS scheint ein wenig hacky.

<h1 id="logo">
    <a href="">Stack Overflow</a>
</h1>

/* css */
#logo {
    padding: 70px 0 0 0;
    overflow: hidden;
    background-image: url("logo.png");
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:70px;
}

Beispiel 3: Gleiches HTML, anderer Ansatz mit Text-Einzug. Dies ist der "Phark" -Ansatz zum Ersetzen von Bildern.

<h1 id="logo">
    <a href="">Stack Overflow</a>
</h1>

/* css */
#logo {
    background: transparent url("logo.png") no-repeat scroll 0% 0%;
    width: 250px;
    height: 70px;
    text-indent: -3333px;
    border: 0;
    margin: 0;
}

#logo a {
    display: block;
    width: 280px; /* larger than actual image? */
    height: 120px;
    text-decoration: none;
    border: 0;
}

Beispiel 4: Die Leahy-Langridge-Jefferies-Methode . Wird angezeigt, wenn Bilder und / oder CSS deaktiviert sind.

<h1 id="logo" class="logo">
    <a href="">Stack Overflow</a>
</h1>

/* css */
h1.logo {
    margin-top: 15px; /* for this particular site, set this as you like */
    position: relative; /* allows child element to be placed positioned wrt this one */
    overflow:hidden; /* don’t let content leak beyond the header - not needed as height of anchor will cover whole header */
    padding: 0; /* needed to counter the reset/default styles */
}

h1.logo a {
    position: absolute; /* defaults to top:0, left:0 and so these can be left out */
    height: 0; /* hiding text, prevent it peaking out */
    width: 100%; /* 686px; fill the parent element */
    background-position: left top;
    background-repeat: no-repeat;
}

h1#logo {
    height: 60px; /* height of replacement image */
}

h1#logo a {
    padding-top: 60px; /* height of the replacement image */
    background-image: url("logo.png"); /* the replacement image */
}

Welche Methode ist die beste für solche Dinge? Bitte geben Sie in Ihrer Antwort HTML und CSS an.

Ihnen fehlt die Option:

<h1>
  <a href="http://stackoverflow.com">
    <img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

Titel in href und img zu h1 ist sehr, sehr wichtig!

Ich mache es meistens wie oben, aber aus Gründen der Barrierefreiheit muss ich die Möglichkeit unterstützen, dass Bilder im Browser deaktiviert werden. Anstatt den Text aus dem Link von der Seite einzurücken, decke ich ihn ab, indem ich ihn absolut <span>auf die volle Breite und Höhe des <a>und mit positionierez-index ihn in der Stapelreihenfolge über dem Linktext platziere.

Der Preis ist eins leer <span>, aber ich bin bereit, ihn dort für etwas so Wichtiges wie einen zu haben <h1>.

<h1 id="logo">
  <a href="">Stack Overflow<span></span></a>
</h1>

#logo a {
   position:relative;
   display:block;
   width:[image width];
   height:[image height]; }

#logo a span {
   display:block;
   position:absolute;
   width:100%;
   height:100%;
   background:#ffffff url(image.png) no-repeat left top;
   z-index:100; /* Places <span> on top of <a> text */  }

Wenn Barrierefreiheitsgründe wichtig sind, verwenden Sie die erste Variante (wenn der Kunde ein Bild ohne Stile sehen möchte).

<div id="logo">
    <a href="">
        <img src="logo.png" alt="Stack Overflow" />
    </a>
</div>

Keine Notwendigkeit, imaginäre SEO-Anforderungen zu erfüllen, da der obige HTML-Code die richtige Struktur hat und nur Sie entscheiden sollten, ob dies für Ihre Besucher geeignet ist.

Sie können die Variante auch mit weniger HTML-Code verwenden

<h1 id="logo">
  <a href=""><span>Stack Overflow</span></a>
</h1>

/* position code, it may be absolute position or normal - depends on other parts of your site */
#logo {
  ...
}

#logo a {
   display:block;
   width: actual_image_width;
   height: actual_image_height;
   background: url(image.png) no-repeat left top;
}

/* for accessibility reasons - without styles variant*/
#logo a span {display: none}

Bitte beachten Sie, dass ich alle anderen CSS-Stile und Hacks entfernt habe, da sie nicht der Aufgabe entsprachen. Sie können nur in bestimmten Fällen nützlich sein.

Hier etwas spät dran, konnte aber nicht widerstehen.

Ihre Frage ist halb fehlerhaft. Lassen Sie mich erklären:

Die erste Hälfte Ihrer Frage zum Ersetzen von Bildern ist eine gültige Frage, und meiner Meinung nach ist dies für ein Logo ein einfaches Bild. ein alt-Attribut; und CSS für seine Positionierung sind ausreichend.

Die zweite Hälfte Ihrer Frage zum "SEO-Wert" des ersten Halbjahres für ein Logo ist der falsche Ansatz, um zu entscheiden, welche Elemente für verschiedene Arten von Inhalten verwendet werden sollen.

Ein Logo ist keine primäre Überschrift oder gar keine Überschrift. Wenn Sie das Logo auf jeder Seite Ihrer Website mit dem H1-Element markieren, schadet dies Ihren Rankings (geringfügig) mehr als es nützt. Semantisch sind Überschriften (H1 - H6) genau dafür geeignet: Überschriften und Unterüberschriften für den Inhalt.

In HTML5 ist mehr als eine Überschrift pro Seite zulässig, aber ein Logo verdient keine davon. Ihr Logo, bei dem es sich möglicherweise um ein unscharfes grünes Widget und Text handelt, befindet sich aus einem bestimmten Grund in einem Bild neben der Kopfzeile. Es ist eine Art "Stempel" und kein hierarchisches Element zur Strukturierung Ihres Inhalts. Das erste (ob Sie mehr verwenden, hängt von Ihrer Überschriftenhierarchie ab) H1 jeder Seite Ihrer Website sollte den Betreff enthalten. Die Hauptüberschrift Ihrer Indexseite lautet möglicherweise "Die beste Quelle für unscharfe grüne Widgets in NYC". Die primäre Überschrift auf einer anderen Seite könnte "Versanddetails für unsere Fuzzy-Widgets" sein. Auf einer anderen Seite kann es sich um "Über Berts Fuzzy Widgets Inc." handeln. Du hast die Idee.

Randnotiz: So unglaublich es auch klingt, schauen Sie nicht in der Quelle der Google-eigenen Web-Eigenschaften nach Beispielen für korrektes Markup. Dies ist ein ganzer Beitrag für sich.

Um den größtmöglichen "SEO-Wert" für HTML und seine Elemente zu erzielen , werfen Sie einen Blick auf die HTML5-Spezifikationen und treffen Sie Markup-Entscheidungen auf der Grundlage der (HTML-) Semantik und des Werts für Benutzer vor Suchmaschinen. Sie haben dann einen besseren Erfolg mit Ihrem SEO.

Ich denke, Sie wären an der H1-Debatte interessiert . Es ist eine Debatte darüber, ob das h1-Element für den Titel der Seite oder für das Logo verwendet werden soll.

Persönlich würde ich Ihrem ersten Vorschlag folgen, etwas in dieser Richtung:

<div id="header">
    <a href="http://example.com/"><img src="images/logo.png" id="site-logo" alt="MyCorp" /></a>
</div>

<!-- or alternatively (with css in a stylesheet ofc-->
<div id="header">
    <div id="logo" style="background: url('logo.png'); display: block; 
        float: left; width: 100px; height: 50px;">
        <a href="#" style="display: block; height: 50px; width: 100px;">
            <span style="visibility: hidden;">Homepage</span>
        </a>
    </div>
    <!-- with css in a stylesheet: -->
    <div id="logo"><a href="#"><span>Homepage</span></a></div>
</div>


<div id="body">
    <h1>About Us</h1>
    <p>MyCorp has been dealing in narcotics for over nine-thousand years...</p>
</div>

Dies hängt natürlich davon ab, ob Ihr Design Seitentitel verwendet, aber dies ist meine Haltung zu diesem Thema.

<h1>
  <a href="http://stackoverflow.com">
  Stack Overflow<img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

Dies war die gute Option für SEO, da SEO dem H1-Tag eine hohe Priorität einräumt. Innerhalb des h1-Tags sollte Ihr Site-Name stehen. Wenn Sie mit dieser Methode den Site-Namen in SEO suchen, wird auch Ihr Site-Logo angezeigt.

Wenn Sie den Site-Namen ODER den Text ausblenden möchten, verwenden Sie bitte den Text-Einzug im negativen Wert. Ex

h1 a {
 text-indent: -99999px;
}

Sie haben den Titel im <a>Element verpasst .

<h1 id="logo">
  <a href="#" title="..."><span>Stack Overflow</span></a>
</h1>

Ich schlage vor, den Titel in das <a>Element einzufügen, da der Kunde wissen möchte, was dieses Bild bedeutet. Da Sie dies text-indentfür den Test festgelegt <h1>haben, kann dieser Front-End-Benutzer Informationen zum Hauptlogo erhalten, während er über dem Logo schwebt.

Wie macht W3C?

Schauen Sie sich einfach https://www.w3.org/ an . Das Bild hat eine z-index:1, der Text ist hier aber hinterher wegen der an die z-index:0gekoppeltenposition: absolute;

Das ursprüngliche HTML:

<h1 class="logo">
    <a tabindex="2" accesskey="1" href="/">
        <img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C">
    </a>
    <span class="alt-logo">W3C</span>
</h1>

Das ursprüngliche CSS:

#w3c_mast h1 a {
    display: block;
    float: left;
    background: url(../images/logo-w3c-screen-lg) no-repeat top left;
    width: 100%;
    height: 107px;
    position: relative;
    z-index: 1;
}
.alt-logo {
    display: block;
    position: absolute;
    left: 20px;
    z-index: 0;
    background-color: #fff;
}

Ein Punkt, den niemand angesprochen hat, ist die Tatsache, dass das h1-Attribut für jede Seite spezifisch sein sollte und die Verwendung des Site-Logos das H1 auf jeder Seite der Site effektiv repliziert.

Ich verwende gerne az index hidden h1 für jede Seite, da die beste SEO h1 oft nicht die beste für den Verkauf oder den ästhetischen Wert ist.

Eine neue (Keller) Methode soll die Geschwindigkeit gegenüber der -9999px-Methode verbessern:

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

hier empfohlen: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

Ich weiß es nicht, aber das ist das Format, das ich verwendet habe ...

<h1>
    <span id="site-logo" title="xxx" href="#" target="_self">
        <img src="http://www.xxx.com/images/xxx.png" alt="xxx" width="xxx" height="xxx" />
        <a style="display:none">
            <strong>xxx</strong>
        </a>
    </span>
</h1>

Einfach und es hat meiner Seite keinen Schaden zugefügt, soweit ich sehen kann. Sie könnten es css, aber ich sehe es nicht schneller laden.

Aus SEO-Gründen:

<div itemscope itemtype="https://schema.org/Organization">
 <p id="logo"><a href="/"><span itemprop="Brand">Your business</span> <span class="icon fa-stg"></span> - <span itemprop="makesOffer">sell staff</span></a></p>
 </div>
   <h1>Your awesome title</h1>

Nachdem ich die obigen Lösungen gelesen hatte, verwendete ich eine CSS-Grid-Lösung.

1. Erstellen Sie ein Div, das den h1-Text und das Bild enthält.
2. Positionieren Sie die beiden Elemente in derselben Zelle und machen Sie beide relativ positioniert.
3. Verwenden Sie die alte zeldman.com-Technik , um den Text mithilfe der Eigenschaften " Texteinzug" , "Leerzeichen" und "Überlauf" auszublenden.

<div class="title-stack">
    <h1 class="title-stack__title">StackOverflow</h1>
    <a href="#" class="title-stack__logo">
        <img src="/images/stack-overflow.png" alt="Stack Overflow">
    </a>
</div>

.title-stack {
    display: grid;
}
.title-stack__title, .title-stack__logo {
    grid-area: 1/1/1/1;
    position: relative;
}
.title-stack__title {
    z-index: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

<h1><a href="/" title="Some title">Name</a></h1>

h1 a{
  width: {logo width};
  height: {logo height};
  display:block;
  text-indent:-9999px;
  background:url({ logo url});
}

<div class="logo">
    <h1><a href="index.html"><span>Insert Website Name</span></a></h1>
    <p>Insert Slogan Here</p>
</div>

#header .logo h1 {
    background: red; /* replace with image of logo */
    display:block;
    height:40px; /* image height */
    width:220px; /* image width */
}

#header .logo h1 a {
    display:block;
    height:40px; /* image height */
    width:220px; /* image width */
}

#header .logo h1 a span {
    display:none;
}