suchen

Heim  >  Artikel  >  Web-Frontend  >  Tipps zur Verwendung von h1 tag_Experience Exchange

Tipps zur Verwendung von h1 tag_Experience Exchange

PHP中文网
PHP中文网Original
2016-05-16 12:06:481777Durchsuche

Die korrekte Verwendung von H1-Tags kann den Zweck von SEO erreichen. Wie kann man also H1-Tags verwenden, ohne die ursprüngliche Schönheit zu verlieren? Tatsächlich können wir durch die korrekte Verwendung des h1-Tags sowohl SEO- als auch ästhetische Zwecke erreichen. Jeder weiß, dass Suchmaschinen H1-Tags bevorzugen. Das h1-Tag ist auch ein sehr grundlegender und wichtiger Schritt in der Suchmaschinenoptimierung. Aber manchmal wird aus Gründen des Interface-Stils viel Titeltext in Bilder umgewandelt. In den meisten Fällen werden Bilder direkt beim Ausschneiden von Seiten verwendet. Was den Code betrifft, wird das h1-Tag seine Wirkung auf Suchmaschinen verlieren.

Tatsächlich können Sie mit ein wenig Anpassung beides erledigen. Wir brauchen zwei Bilder:
1
2

Schauen Sie sich diesen Absatz an. Der h1-Tag ist weiterhin für Suchmaschinen lesbar. Wir verwenden lediglich text-indent:-9999px, um den Text „Freunde zum Beitritt einladen“ weit nach links zu werfen.

Der Code lautet wie folgt:

<style>  
.test{}  
.test h1{margin:0; padding:0; text-indent:-9999px; width:522px; height:45px; 
background:url(header.gif) no-repeat;}  
.testbox{background:url(bg.gif); width:522px; height:323px;}  
</style>  
<div class="test">  
<h1>邀请好友加入</h1>  
</div>  
<div class="testbox"></div>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>h1标签的使用</title> 
<style> 

.test{} 
.test h1{margin:0; padding:0; text-indent:-9999px; width:522px; height:45px; 
background:url(/upload/20071124114047865.gif) no-repeat;} 
.testbox{background:url(/upload/20071124114047678.gif); width:522px; height:323px;} 
</style> 
</head> 

<body> 
正确使用h1标签，兼顾美观与seo. 
<div class="test"> 
    <h1>邀请好友加入</h1> 
</div> 
<div class="testbox"></div> 
</body> 
</html>

Das h1-Tag kann auch so verwendet werden Natürlich können Sie auch das h1-Tag verwenden. Verwenden Sie Stile wie Schriftgröße, Schriftfarbe usw. Natürlich ist es, wie im obigen Beispiel, nur zum Erreichen des SEO-Zwecks nicht erforderlich, Stile zum Ändern des h1-Tags zu verwenden, weil Was vor dem Benutzer angezeigt wird, ist ein Bild.

Das Obige ist der Inhalt des Austauschs von h1-Tag-Nutzungsfähigkeiten. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Zusammenfassung der Nachteile und Vorteile der Verwendung des CSS-Frameworks Layout_Experience ExchangeNächster Artikel：Zusammenfassung der Nachteile und Vorteile der Verwendung des CSS-Frameworks Layout_Experience Exchange

In Verbindung stehende Artikel

Mehr sehen