-
이 기간 동안 SEO 최적화에 대한 많은 기사를 읽었으며 대부분 외부 링크, 기사 내부 링크, PR 개선 등 운영 단계의 지식에 대해 이야기하고 특정 검색 엔진 최적화에 대한 일부 경험담을 언급하는 것으로 나타났습니다. . 이런 유형의 기사가 정말 너무 많습니다. 너무 많이 읽으면 동일하고 신선함이 없다고 느낄 것입니다. 오늘은 주로 SEO 최적화의 HTML 레이아웃에 대한 몇 가지 기술에 대해 이야기하겠습니다. 저자는 태어날 때부터 프로그래머이기 때문에 제가 쓴 내용은 약간 기술적이므로 이해해 주시기 바랍니다.
많은 웹사이트 홈페이지에는 슬라이드쇼 형태로 전환할 수 있는 히트맵 모듈이 있습니다(아래 그림 참조).
이 모듈은 작성자의 웹사이트를 포함하여 국내 웹사이트의 70%를 차지합니다. 이 효과에 대한 코드는 HTML 문서 구조의 앞 부분에 있는 경우가 많으며, 가장 일반적인 것은 탐색 표시줄 아래에 있습니다. 구현 방법은 Flash 또는 기타입니다. 가장 일반적으로 사용되는 레이아웃 코드인 JS 스크립트는 다음과 같습니다.
<div 클래스="배너">
<객체>
플래시 버전
</object>
</div>
<div 클래스="배너">
<스크립트 유형="텍스트/자바스크립트">
자바스크립트 버전
</script>
</div>
저자는 위의 코드를 HTML의 앞부분에 삽입하면 SEO 최적화에 해로울 뿐만 아니라 일반 사용자에게도 매우 우울한 일이 될 것이라고 생각합니다. SEO의 단점은 웹마스터 친구들이 모두 알고 있듯이 앞부분입니다. HTML 문서의 HTML 문서의 검색 엔진이 더 중요하게 생각하는 것입니다. JS나 FLASH를 사용하여 구현하면 이러한 코드는 검색 엔진에서 인식되지 않지만 다른 중요한 부분이 검색 엔진에 먼저 표시될 수 있으며 이러한 인식할 수 없는 것들이 표시됩니다. 나중에. 일반 사용자에게 나쁜 점은 이 효과를 사용하려면 일반적으로 4~5장의 사진을 전환해야 하며 JS를 사용하든 FLASH를 사용하든 JS를 사용하든 FLASH를 사용하든 파일에 삽입하기만 하면 사진의 전체 크기가 최소 약 200KB라는 것입니다. HTML 문서는 사용자가 로딩될 때까지 기다려야 합니다. 특히 그림이 큰 경우 헤드 영역에 걸려서 브라우저가 정지될 가능성이 매우 높습니다.
이 기간 동안 저자는 몇 가지 해결책을 요약했으며 장기간 관찰을 통해 이러한 솔루션이 괜찮고 순위에 영향을 미치지 않으며 포함이 정상임을 여기에서 모든 사람들과 대담하게 공유합니다.
1. 구조적 순서 조정
과거의 조판 및 레이아웃 경험에 따르면 우리의 코드는 다음과 같아야 합니다.
HTML 코드:
<본문>
<div 클래스="컨테이너">
<div class="header">헤더 내용</div>
<div class="banner">슬라이드쇼 효과 모듈</div>
<div class="content">텍스트 콘텐츠</div>
<div class="copyright">저작권 섹션</div>
</div>
</body>
CSS 코드:
본문 {margin:0;padding:0;text-align:center;}
.container {너비:980px;여백:0 자동;위치:상대적;배경:은;}
.header {높이:200px;줄 높이:200px;배경:빨간색;}
.banner {높이:150px;줄 높이:150px;배경:노란색;}
.content {높이:400px;라인 높이:400px;배경:파란색;}
.copyright {높이:50px;라인 높이:50px;배경:녹색;}
작성자의 개선된 코드는 다음과 같습니다.
HTML 코드:
<본문>
<div 클래스="컨테이너">
<div class="header">헤더 내용</div>
<div class="content">텍스트 콘텐츠</div>
<div class="copyright">저작권 섹션</div>
<div class="banner">슬라이드쇼 효과 모듈</div>
</div>
</body>
CSS 코드:
본문 {margin:0;padding:0;text-align:center;}
.container {너비:980px;여백:0 자동;위치:상대적;배경:은;}
.header {높이:200px;줄 높이:200px;배경:빨간색;}
.banner {위치:절대;상단:200px;너비:980px;높이:150px;라인 높이:150px;배경:노란색;}
.content {margin-top:150px;height:400px;line-height:400px;배경:blue;}
.copyright {높이:50px;라인 높이:50px;배경:녹색;}
위 코드의 비교 분석을 통해 실제로 CSS에서 Position Floating 레이아웃 기술을 사용했습니다. Position Floating 레이아웃에 대한 관련 정보를 찾을 수 있으므로 SEO 최적화에 매우 유용한 지식 포인트를 꼭 숙지하세요.
2. 지연 로딩을 능숙하게 사용하세요
HTML 코드:
<본문>
<div 클래스="컨테이너">
<div class="header">헤더 내용</div>
<div class="content">텍스트 콘텐츠</div>
<div class="copyright">저작권 섹션</div>
<div class="배너"></div>
</div>
</body>
쿼리 코드:
$(문서).ready(함수() {
window.setTimeout(함수() {
플래시 버전
$(".banner").html("<object>여기에 FLASH 코드가 삽입됩니다</object>")
아약스 버전
$.get(" http://www.flagwind.com/GetBanner.html ", 함수(데이터){
$(".banner").html(data);
});
}, 3000);
});
이 Jquery 코드의 일반적인 의미는 문서가 로드된 후 3초 후에 AJAX 요청 또는 다른 것을 실행하여 배너 DIV의 콘텐츠를 제어한다는 것입니다.
위 두 솔루션의 코드는 단지 일부 예일 뿐입니다. 다른 곳에서 사용할 수도 있고, 나중에 SEO와 관련 없는 일부 콘텐츠를 로드할 수도 있고, JS를 사용하여 표시를 위해 로딩을 지연할 수도 있습니다. 그러나 일반 사용자에게도 좋은 일입니다. 이 기사는 원래 심천 웹 사이트 구축 Flagwind Network www.flagwind.com 에서 작성되었습니다. 전달할 때 원본 작성자의 저작권 정보를 삭제하지 마십시오. 감사합니다!
기여해 주신 Shenzhen Qifeng Network에 감사드립니다.