Home >Web Front-end >CSS Tutorial >Tips for using h1 tag_Experience exchange
Tips for using h1 tag_Experience exchange
- PHP中文网Original
- 2016-05-16 12:06:481801browse
the correct use of h1 tags can achieve the purpose of seo, so how to use h1 tags without losing the original beauty? in fact, by using the h1 tag correctly, we can achieve both seo and aesthetic purposes. everyone knows that search engines prefer h1 tags. the h1 tag is also a very basic and important step in seo. but sometimes for the sake of interface style, a lot of title text is made into pictures. in most cases, images are used directly when cutting pages. in terms of code, the h1 tag will lose its effect on search engines.
in fact, with a little adjustment, you can take care of both. we need two pictures:
1 
2 
look at this paragraph. the h1 tag is still readable by search engines, we just use text-indent:-9999px; to throw the "invite friends to join" text far to the left.
the code is as follows:
<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>
the h1 tag can also be used like this, of course you can also use styles such as font size, font color, etc. on the h1 tag. of course, like the example above, just to achieve the purpose of seo, there is no need to use styles to modify the h1 tag, because what is displayed in front of the user is a picture.
the above is the content of h1 tag usage skills and experience exchange. for more related content, please pay attention to the php chinese website (www.php.cn)!