it-swarm.com.de

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

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

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

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: Hab 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 Texteinzug. 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 so etwas? Bitte geben Sie in Ihrer Antwort HTML und CSS an.

232
Andrew

Sie verpassen 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!

213
Rahul

Ich mache das 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, positioniere ich den <span> </ Code> absolut auf die volle Breite und Höhe des <a> Und verwende z-index, Um es in der Stapelreihenfolge über dem Linktext zu platzieren.

Der Preis ist ein leerer <span>, Aber ich bin bereit, ihn für etwas so Wichtiges wie einen <h1> Dort zu haben.

<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 */  }
17
Rob Knight

Wenn Zugänglichkeitsgrü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>

Es ist nicht erforderlich, sich an imaginäre SEO-Anforderungen zu halten, da der obige HTML-Code die richtige Struktur aufweist und nur Sie entscheiden sollten, ob dies für Ihre Besucher geeignet ist.

Sie können auch die Variante 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.

11
se_pavel

Ein bisschen 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 handelt es sich bei einem Logo um ein einfaches Bild. ein alt-Attribut; und CSS für die Positionierung sind ausreichend.

Die zweite Hälfte Ihrer Frage zum "SEO-Wert" des H1 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 Hauptüberschrift oder gar keine Überschrift. Wenn Sie das H1-Element verwenden, um das Logo auf jeder Seite Ihrer Website zu kennzeichnen, ist dies für Ihre Platzierungen (etwas) schädlicher als nützlich. 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 verschwommenes grünes Widget handelt, und ein Teil des Texts befindet sich nicht ohne Grund in einem Bild neben der Kopfzeile. Es ist eine Art "Stempel", 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 der Seite enthalten. Die wichtigste Ü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 lautet möglicherweise "Versanddetails für unsere Fuzzy-Widgets". Auf einer anderen Seite könnte es sich um "About Bert's Fuzzy Widgets Inc." handeln. Du hast die Idee.

Randnotiz: So unglaublich es auch klingt, schauen Sie sich nicht die Quelle der von Google betriebenen Web-Eigenschaften an, um Beispiele für korrektes Markup zu finden. Dies ist ein ganzer Beitrag für sich.

Schauen Sie sich die HTML5-Spezifikationen an, und treffen Sie Markup-Entscheidungen, die auf der (HTML-) Semantik und dem Wert für die Benutzer vor Suchmaschinen und Sie basieren, um den "SEO-Wert" von HTML und seinen Elementen zu optimieren habe besseren Erfolg mit deinem SEO.

3
Mattypants

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

Persönlich würde ich mit Ihrem ersten Vorschlag etwas in diese Richtung gehen:

<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.

3
Ross
<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 hohe Priorität einräumt. Innerhalb des h1-Tags sollte sich Ihr Site-Name befinden. Mit dieser Methode wird beim Durchsuchen des Site-Namens in SEO auch Ihr Site-Logo angezeigt.

möchten Sie den Site-Namen verbergen? OR text Bitte verwenden Sie den Texteinzug in einem negativen Wert. ex

h1 a {
 text-indent: -99999px;
}
2
Vishal Gupta

Sie haben den Titel im Element <a> Verpasst.

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

Ich schlage vor, den Titel in das Element <a> Einzufügen, da der Client wissen möchte, was dieses Bild bedeutet. Da Sie text-indent Für den Test von <h1> Festgelegt haben, kann der Front-End-Benutzer Informationen zum Hauptlogo abrufen, während er über dem Logo schwebt.

2
30ml

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 einen versteckten z-Index h1 für jede Seite, da die beste SEO h1 oft nicht die beste für den Verkauf oder den ästhetischen Wert ist.

1
DFA

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>
0
Potky

Wie funktioniert W3C?

Schauen Sie sich einfach https://www.w3.org/ an. Das Bild hat ein z-index:1, der text ist hier aber hinten wegen dem z-index:0 gekoppelt mit dem position: absolute;

Der ursprüngliche HTML-Code:

<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;
}
0
Sebastien Horin

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

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

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

0
coral_sea

Ich weiß nicht, aber das ist das verwendete Format ...

<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 finden, aber ich sehe nicht, dass es schneller geladen wird.

0
Taswiz

Ich denke, Beispiel eins ist mehr als genug, da alternativer Text angezeigt wird, wenn Bilder deaktiviert sind. Dadurch können Suchmaschinen auch mehr über Ihre Website erfahren.

Update: Sieht so aus, als hätte ich mich geirrt. Überprüfen Sie diese Artikel .

0
Shoban