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

240

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.

Andrew
quelle
Sie sollten dieses Thema überprüfen an: stackoverflow.com/questions/1874895/…
meo
15
Matt Cutts beantwortet diese Frage. youtu.be/fBLvn_WkDJ4
troynt
2
Sollte das titleAttribut nicht in der sein <a>?
Bobo
23
Diese Frage sollte nicht als nicht zum Thema gehörend markiert werden. Es ist eine ziemlich klar definierte Frage zu CSS und Suchmaschinenoptimierung. Nur weil es nicht C # ist, heißt das nicht, dass es kein Code ist.
Mike Murko
3
@troynt Ich finde Matt Cutts, der manchmal irreführende Ratschläge gibt. Als solches neige ich dazu, ihn nicht zu beobachten.
TheBlackBenzKid

Antworten:

221

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!

Rahul
quelle
12
Hat das Umschließen eines Bildes mit einem h1 mit Alt-Text das gleiche Gewicht (seo-weise) wie mit einem h1 umwickeltes Klartext?
Andrew
11
Übrigens ist es relevant, dass ein Logo Teil des Inhalts Ihrer Website ist und nicht zur Dekoration verwendet wird. Verwenden Sie daher <img> mit dem alt-Attribut und nicht mit CSS für Ihr Logo.
Boris Guéry
14
Matt Cutts beantwortet diese Frage. youtube.com/user/GoogleWebmasterHelp#p/search/0/fBLvn_WkDJ4
Troynt
34
Leider ist der Link im Kommentar von @troynt jetzt defekt. Hier ist ein neuer Permalink zum Inhalt: youtu.be/fBLvn_WkDJ4
ahsteele
10
Für alle, die sich fragen, was in dem verlinkten Video enthalten ist: Matt Cutts sagt im Grunde, Sie sollten das alt-Attribut des img-Tags verwenden, anstatt Text mit CSS auszublenden.
Bjunix
17

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 */  }
Rob Knight
quelle
1
Was ist falsch am Einrücken? Ich ging davon aus, dass Screenreader und Crawler den Text trotz Einrückung immer noch aufnehmen.
Karbass
2
Es tut mir leid, dass ich so lange gebraucht habe, um hierher zurückzukehren. Das einzige Problem beim Einrücken besteht darin, dass Bilder im Browser des Benutzers deaktiviert sind, CSS jedoch aktiviert ist, nichts angezeigt wird, Text oder Bilder. Es ist eine Art Randfall, aber wichtig für mich, an einer Universitätswebsite zu arbeiten.
Rob Knight
hmm ... ich konnte das nicht zum Laufen bringen. Der Ankertext wurde weiterhin über dem Bild angezeigt.
Andrew
<nitpicker> verwenden Sie stattdessen #logo span, es wird für den Browser effizienter sein, </ nitpicker> zu rendern
Chris Missal
1
In einigen Fällen benötigen Sie ein {top: 0}, um eine Spanne zu #logo.
Marcus
11

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.

se_pavel
quelle
3
display:noneist nicht zugänglich.
KPM
Die beste Methode besteht darin, das Logo aufgrund seiner Barrierefreiheit, Benutzerfreundlichkeit und SEO-Optimierung unter div zu verpacken und es wird hauptsächlich in großen Web-Organisationen verwendet. Twitter, Amazon, Mozilla verwenden nicht <h1> für ihre Logos, sondern Hauptüberschriften, um den Seitenwert besser zu erfassen. bit.ly/1MR4fr5
Oriol
4

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.

Mattypants
quelle
1
Hinzu kommt, dass all dies wahr ist und das Logo nicht das h1 auf einer anderen Seite außer der Homepage sein sollte (und im Idealfall nicht auf einer Homepage). Auf einer Homepage ist jedoch häufig das Logo der relevanteste Ort für das h1, da der Inhalt des Heldenbanners möglicherweise nicht spezifisch genug für das Thema der Website ist (dh er bezieht sich möglicherweise auf einen aktuellen Service oder ein aktuelles Produkt, das bzw. das gepusht wird das Kernthema der Website). Wenn die Site nur einen Fokusbereich hat (z. B. eine Site für eine App), funktioniert der Heldenbereich möglicherweise für das h1. Wenn es nicht funktioniert, ist ein Bild mit alt in h1 besser als nichts.
Elmarko
3

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.

Ross
quelle
Ich bin mir ziemlich sicher, dass IMGs als Inhalt betrachtet werden, CSS-Hintergrundbilder jedoch nicht. Aus diesem Grund tendiere ich dazu, Hintergrundbilder für Bilder auf der gesamten Website und solche Dinge zu verwenden, die nicht explizit für diesen Seiteninhalt gelten.
Joe Phillips
@ d03boy: Nun, in diesem Fall könnten Sie ein Inline-Div erstellen, das die richtige Größe für die Logo-Größe hat, und dem den Hintergrund geben. Ein Bereich darin (der sichtbar ist: versteckt;) bietet einen Ersatz für "Alt-Text".
Ross
6
H1 Debatte ist jetzt eine tote Verbindung
Alex
3
<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;
}
Vishal Gupta
quelle
2

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.

30 ml
quelle
2

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

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.

DFA
quelle
Sie können H1 immer nur für das Logo auf der Hauptseite verwenden.
Mariusz Jamro
0

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.

Taswiz
quelle
0

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

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;
}
Dani Amsalem
quelle
-1
<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});
}
Rodrigo Reis
quelle
Es ist am besten, keine massiven Texteinrückungen wie diese zu verwenden, da dies zu einem potenziell großen Leistungseinbruch führt. Detaillierte Erklärung hier .
Nick F
-1
<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;
}
Daniel Boundy
quelle