Header Text Image Replacement

Sie wissen, dass Suchmaschinen wie Google, Yahoo und MSN hauptsächlich den Textinhalt Ihrer Seiten betrachten, um sie zu indizieren und ihre Relevanz für Suchanfragen zu bestimmen. Sie wissen auch, dass die Verwendung von Überschriften-Tags wie <h1> in Ihrem HTML wichtig ist, da Suchmaschinen organisierte, unterteilte Inhalte schätzen. Aber was, wenn Sie einfach keine großen, hässlichen Text-Abschnittsüberschriften auf Ihrer Website haben möchten? Würden Sie nicht lieber Ihre eigene benutzerdefinierte Grafik verwenden? Sicher würden Sie das, aber Sie möchten Ihre <h1> nicht für <img> opfern und die gesamte Suchmaschinenfreundlichkeit verlieren. Das müssen Sie nicht!

Einer der angesagtesten Tricks im Moment ist die Verwendung einer Klasse, um Header-Text durch ein Bild zu ersetzen. Verwenden Sie Ihre Header-Tags wie gewohnt, geben Sie ihnen nur einen eindeutigen Klassennamen: <h1 class="headerReplacement">Section Header</h1> Definieren Sie die Klasse in Ihrem CSS wie folgt:

.headerReplacement {
   text-indent: -9999px;
   width: 600px;
   height: 100px;
   background: url(/path/to/your/image.jpg) #cccccc no-repeat;  
}

Dies sollte Ihr schönes neues benutzerdefiniertes Bild genau dort platzieren, wo die alte hässliche Textüberschrift war, ohne ein Gramm Lesbarkeit für Suchmaschinen zu verlieren. Diese Technik ermöglicht auch, dass Ihre Seite gut mit Nutzern umgeht, die Screenreader verwenden oder das Web mit ausgeschalteten Bildern und/oder CSS durchsuchen.