ホームページ >ウェブフロントエンド >CSSチュートリアル >h1タグ活用のヒント_体験交流
h1タグ活用のヒント_体験交流
- PHP中文网オリジナル
- 2016-05-16 12:06:481801ブラウズ
h1 タグを正しく使用することで seo の目的を達成できます。では、本来の美しさを失わずに h1 タグを使用するにはどうすればよいでしょうか?実際、h1 タグを正しく使用することで、seo と美観の両方の目的を達成できます。検索エンジンが h1 タグを好むことは誰もが知っています。 h1 タグは、seo において非常に基本的かつ重要なステップでもあります。ただし、インターフェイスのスタイルを考慮して、多くのタイトル テキストが画像になる場合があります。ほとんどの場合、ページをカットするときに画像が直接使用されます。コードに関して言えば、h1 タグは検索エンジンに対する効果を失います。
実際、少し調整するだけで両方に対処できます。 2 つの写真が必要です:
1 
2 
この段落を見てください。 h1 タグは引き続き検索エンジンで読み取ることができるため、text-indent:-9999px; を使用して「友達を参加に招待する」テキストを左端にスローするだけです。
コードは次のとおりです。
<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>
h1 タグは次のこともできます。このように使用することはもちろんですが、h1タグ内で文字サイズや文字色などのスタイルを使用することもできます。もちろん、上記の例のように、seoの目的を達成するだけであれば、スタイルを使用する必要はありませんユーザーの目の前に表示されるのは画像であるため、h1 タグを変更します。
上記は h1 タグの使用スキルと経験交流の内容ですが、その他の関連コンテンツについては、php 中国語 web サイト (www.php.cn) をご覧ください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。