h1태그 이용팁_체험교류-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

h1태그 이용팁_체험교류

PHP中文网

May 16, 2016 pm 12:06 PM

h1 태그를 올바르게 사용하면 SEO의 목적을 달성할 수 있는데, 원래의 아름다움을 잃지 않고 h1 태그를 사용하는 방법은 무엇일까요? 실제로 h1 태그를 올바르게 사용하면 SEO와 미적 목적을 모두 달성할 수 있습니다. 검색 엔진이 h1 태그를 선호한다는 것은 누구나 알고 있습니다. h1 태그는 SEO에서 매우 기본적이고 중요한 단계이기도 합니다. 하지만 때로는 인터페이스 스타일을 위해 많은 제목 텍스트가 그림으로 만들어지기도 합니다. 대부분의 경우 페이지를 자를 때 이미지가 직접 사용됩니다. 코드 측면에서 h1 태그는 검색 엔진에 대한 효과를 잃게 됩니다.

사실 조금만 조정하면 두 가지를 모두 해결할 수 있습니다. 두 장의 사진이 필요합니다.
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 중국어 홈페이지(www.php.cn)를 주목해주세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.