검색 엔진 순위를 개선 하기 위해 AJAX 기술을 사용 하 여

중간 거래 SEO 진단 Taobao 게스트 클라우드 호스트 기술 홀

탐색 요소를 웹 페이지에 포함 된 귀하의 검색 엔진 순위를 저하 하 고 귀하의 사이트의 응답 속도 줄일 수 있습니다.　　이 글의 저자가 두 가지 문제를 해결 하기 위해 AJAX 기술을 사용 하는 방법을 당신과 함께 탐험 하 고 싶습니다. 많은 잘 설계 된 웹 사이트에는 많은 양의 실제 콘텐츠와 관련 된 항행 정보 포함 되어 있습니다. 탐색에 대 한 HTML 태그는 검색 엔진 평가 영향을 미칠 수 있습니다 하 고 방문자의 페이지 다운로드 경험을 향상 시킬 수 있습니다. 이 기사에서는 Ajax를 사용 하는 중앙, 빠른 로드 웹 페이지를 만들 방법을 표시 됩니다.

탐색 및 콘텐츠 분리

예를 들어 시작 하자. 읽고 있는 문서는 다음과 같은 요소가 고려 하시기 바랍니다.

· 일부 미리 정의 된 링크는 informit의 다양 한 부분에 있는 헤더.

· 헤더 INFORMIT 디렉터리 구조에서이 문서를 아래 선이 있다 (사실, 이것이 탐색 요소 디렉터리와 관련 된).

· 인기 있는 기사 및 권장된 콘텐츠 링크와 함께 오른쪽에 사이드바.

· 바닥글 및 일부 링크를 절대 변하지 않을 것입니다.

"혼합" 위의 검색 엔진 색인 데이터 방법에 영향을 미칠 것입니다.

· 검색 엔진은 콘텐츠 및 탐색 텍스트 구별할 수 없습니다, 때문에 그들은 그들이 귀하의 페이지에 찾아 다 색인. 디렉터리에 키워드 관련성이 없는 탐색 키워드와 혼합 되어, 이후 내용 사이 협회 크게 감소. 일부 검색 엔진 그들은 (예를 들어 고정된 머리글 및 바닥글)에 대 한 검색 및 삭제 페이지에 중복 된 텍스트를 찾을 수 있습니다 그들은 주장 한다. 그러나,이 가능성에 의존 하지 않는, 그들은이 기술을 달성 하는 경우에 그것은 되지 않을 수 있습니다 항상 신뢰할 수 있는.

· 아웃 바운드 링크를 웹 페이지에 귀하의 콘텐츠 페이지 평가 영향을 줍니다. 비록이 향상 될 수 있습니다의 인기 기사 순위 (많은 페이지는 그들에 게 연결 됩니다), (예를 들어 개인 정보 보호 정책)에 연결 된 모든 페이지 일반적으로 얻을 등급-이 가장 높은 페이지 되지 않을 수 있습니다 우려에 대해 우려 했습니다. 내 웹 사이트 중 하나에서 가장 높은 등급 페이지 먼저 Google에서 찾을 수 사용자가 원하는 웹 관리자-아닙니다에 메시지를 보내는 형태입니다.

주의

사이트 지도 사용 하지 않는 경우에 Google의 사이트맵 사용자 인터페이스를 통해 귀하의 페이지의 페이지 순위에 모습을 얻을 수 있습니다.

웹 페이지에 추가 되는 탐색 요소에는 웹 페이지 테이블을 사용 하는 DIV 요소 (Informit)를 사용 하지 않는 경우에 특히 낮은 속도 인터넷 액세스를 사용 하는 사용자 영향을 수 있습니다. 사용자에 게 표시 되기 전에 경우에, 전체 테이블 일부 웹 브라우저에 로드 해야 합니다.

전통적으로, 웹 디자이너는 일반적으로 프레임 세트를 사용 하 여 또는 별도의 콘텐츠에서 탐색 탐색 아키텍처 (널리 사용 되는 자바 스크립트 코드)의 완전 한 세트를 만듭니다. 이러한 접근의 둘 다 있다 그들의 단점, 그래서 그것은 놀라운 일이 아니다 많은 대형 웹 사이트는 프레임셋을 사용 하지 마십시오.

AJAX 프레임 워크에서 사용 되는 기술로,이 문제에 대 한 솔루션을 제공할 수 있습니다.

· 각 웹 페이지에는 탐색 요소와 실제 내용에 대 한 자리 표시자만 들어 있습니다.

· XMLHttpRequest 개체 또는 포함 된 프레임 (IFRAME)을 통해 웹 페이지를 로드 한 후 이러한 탐색 요소를 로드 합니다.

· 탐색 요소의 내용은 다음 웹 페이지 콘텐츠를 생산 어떤 프레임을 포함 하지 않는 깨끗 한 페이지에 병합 됩니다.

이 방법으로 귀하의 웹 페이지를 디자인 하기 전에 다음 질문을 고려 해야:

· 검색 엔진 초기 웹 페이지 표시 됩니다. 사이트 맵 또는 관련 페이지 링크 페이지에 포함 되어 있는지 확인 해야 합니다. 탐색 Informit 웹 사이트에서 문서 머리글과 페이지의 문서 정보 섹션에 있는 링크의 상단에는 단지 이것을 달성 하는 좋은 방법.

· 방문자가 그들의 브라우저에서 JavaScript를 호출 금지 검색 엔진으로 볼 같은 페이지를 있을 것 이다. 그들의 제한 된 보기 귀하의 사이트의 기능에 큰 영향을 만들지 않는 다는 것을 확인 해야 합니다.

· 귀하의 페이지에 몇 가지 정적 콘텐츠를 유지 할 수 있습니다. 예를 들어 informit 식별 및 저작권 정보 항상 모든 방문자에 게 표시 해야 합니다.

페이지를 부분 그것에서 분리 되어야 한다 귀하의 탐색 구조를 연결할 확인 하는 경우 다음 단계를 시작할 수 있습니다.

둘째, 귀하의 웹 페이지 디자인

콘텐츠 및 탐색 분리 향한 첫 번째 단계는 웹 페이지에 탐색 요소를 삽입 하는 자리 표시자를 만드는 것입니다. 탐색 요소의 각 인접 영역에 대 한 당신이 나중에 자바 스크립트 코드에서 식별할 수 있도록 별도 div 요소를 고유 id를 만들어야 합니다. 과도 한 동요를 방지 하려면 또는 목차의 오른쪽 위의 DIV 요소의 크기 한다 크기 조정할 수 제작 페이지 동안 탐색 요소의 실제 크기에 가까운 매우 될 원하는 HTML 코드를 대신 사용 하는 경우 콘텐츠 이동 하지 않습니다. 이렇게 하는 가장 독창적인 방법 중 하나 그 개체 틀에는, 적절 한 크기의 빈 div 요소를 삽입 하는 것입니다.

Informit 사이트 페이지 구조는 이미 잘 설계 하 고, 하 고 그림 1에서 보듯이 DIV 요소 장소에 이미는.

그림 11 Informit 문서의 페이지 구조

항행 div 요소에서 콘텐츠를 제거 하는 빈 상자를 삽입 하면 및 머리글 여기 표시 됩니다 (짧음에 대 한 우리 각 페이지에 회사 로고 및 저작권 정보를 포함 하는 토론을 무시 됩니다). 다음 코드는 적절 한입니다.

<div id= "header" >


< div 스타일 = "높이: 100px; 폭: 100% "></div>


</div>


<div id= "contentarticle" >


<div id= "Firstcol" >

...
문서 콘텐츠...


</div>


<div id= "Secondcol" ></div>


</div>


<div id= "Footer" ></div>


에 관심을 지불 하는


웹 페이지는 원하는 페이지 레이아웃을 달성 하기 위해 테이블을 사용 하는 경우 표 셀 자리 표시자로 다시 사용 하지 마십시오 하 고 표 셀의 DIV 요소를 넣어 하는 것이 좋습니다.

웹 페이지에서 제거 된
요소는 별도 페이지로 다시 해야 합니다. (그러면 버퍼링 된 콘텐츠를 사용 하 여 웹 서버에 상관 없이) 정적 콘텐츠를 표현 하기 위해 정적 HTML 파일을 사용 해야 합니다 그들을 로드 하는 웹 페이지에 동적 요소를 표시 하는 서버 쪽 스크립트를 만듭니다. Informit, 각 웹 페이지는 고유의 문서 식별자 (는 "p =" URL에 인수); 따라서, 문서 식별자를 수락 하 고 오른쪽에 열을 생성 하는 서버-사이드 스크립트를 만드는 데 필요한. 대부분의 경우에서 서버 사이드를 만드는 코드를 포함 된 탐색 가능한 요소를 사용할 수 있습니다.

이 재설계 후
웹 페이지, 다음이 시나리오의 섹션에서 Ajax를 구현할 수 있습니다. 평소와 같이, 인라인 프레임 (IFRAME 요소) 작업할 수 또는 XMLHttpRequest 개체를 선택할 수 있습니다.


3, 임베디드 프레임


브라우저 호환성에 대 한 관심, 포함 된 프레임 워크를 사용 해야 합니다. 일부 오래 된 브라우저는 IFRAME 요소를 지원 하지만 XMLHttpRequest 개체는 지원 되지 않습니다. 물론,이 방법을 사용 하려면 몇 가지 이유가 있다:


· IFRAME에 로드 콘텐츠 로드, 최종 사용자에 게 시각적 과정을 표시 하는 동안 브라우저에 표시 됩니다.


· 페이지 내용으로 작품을 항상 버퍼링 IFRAME에 로드. 오페라의 일부 버전 XMLHttpRequest 개체를 사용 하 여 버퍼링 된 응답을에 좋지 않다.


이렇게 하려면, 우리 각 div 컨테이너에 빈 iframe을 삽입 하 고 다음과 같이 각 IFRAME 후 짧은 자바 스크립트 문을 추가할 수:


<div id= "header" >


< div 스타일 = "높이: 100px; 폭: 100% "></div>


< iframe id = "Header_iframe" 스타일 = "높이: 0px" ></iframe>


<script>loadiframe ("머리글", "/ navigation/header.html")</script>


</div>


Iframe의 ID 접미사로 _iframe와 함께 자리 표시자의 ID를 동일 해야 합니다. Loadiframe 함수는 두 개의 매개 변수를 사용 하 여: 개체 틀 및 URL 로드의 ID.


기술


다운로드 과정에서 iframe 콘텐츠를 볼 수 있도록 하려는 경우, 자리 표시자에 빈 div 상자를 대체 하는 적절 한 크기의 IFRAME 요소를 사용 해야 합니다. 그러나, 보이지 않는 IFRAME을 유지 하려는 경우 일부 브라우저에서 오류를 극복 하기 위해 0에 그것의 높이 설정 하려면 Style 속성을 사용 해야 합니다.


로드 프로세스를 시작 하려면 Loadiframe 함수는 간단 하다:


기능 (id, url) Loadiframe {


try {


var iframeobj = document.getElementById (id + "_iframe");


iframeobj.src = URL;


} catch (err) {


경고 ("로드할 수 없습니다" + "로" url + + id);


}


}


에 관심을 지불 하는


가이 문서의 모든 샘플 코드 가정 브라우저 호환 개체 모델 (DOM) 문서.

그러나
, 메커니즘은 없습니다 원하는 콘텐츠 개체 틀 iframe에 로드 되는 요청 된 페이지를. 따라서, 콘텐츠 로드 (자바 스크립트 호출)를 통해 상위 페이지에 콘텐츠를 사용 하 여 통보 해야 합니다. 가장 좋은 시기는이 일은 페이지가 로드 후 에입니다. 따라서, IFRAME 콘텐츠에서 본문 플래그 onload 이벤트를 포함 해야 합니다:


< 바디 스타일 = "여백: 0px 0px;


안쪽 여백: 0px 0px ">


기술

콘텐츠
부하 IFRAME에 항상 0 여백 있어야 패딩, 그렇지 않으면 그것은 마이그레이션됩니다 약간 상위 페이지에 통합 하는 때의 몸 부분.

Contentloaded 함수는
콘텐츠 본문 부분에 해당 HTML IFRAME 추출의 컨텍스트에서 실행 하 고 적절 한 자리 표시자를 채우는 데 사용 되는 부모 페이지의 컨텍스트에서 실행 되는 함수에 전달:

IFRAME의 컨텍스트에서 실행 되는
contentloaded:


함수 contentloaded (parentid) {


var mycontent = Document.body.innerHTML;


parent.copycontent (parentid, mycontent);


}


Copycontent 부모 웹 페이지의 컨텍스트에서 실행 됩니다:


함수 Copycontent (id, 콘텐츠) {


try {


var 개체 틀 = document.getElementById (ID);


placeholder.innerhtml = 내용;


} catch (err) {


경고 ("HTML 콘텐츠를 복사할 수 없습니다" + id);


}


}


지금, 세심 한 독자 것 의아해, 왜 그렇게 복잡 하 게? 로드 하는 IFRAME 요소에 탐색 요소를 쉽게 아닌 가요? 이 방법의 오해 예방의 어떤 종류를 추가 하는 더 나은입니다:


· IFRAME에 고정된 높이 너비는 있다. 서로 콘텐츠를 실행 하는 경우 콘텐츠가 잘리고 또는 IFRAME 스크롤 막대가 추가 됩니다. 그러나, 항상 상위 페이지에서 DIV 요소에 복사 된 HTML 태그는 크기가 자동으로 조정 하는 그들의 크기를 유지.


· 대상 추가 하지 않으면 때 IFRAME에, 탐색 콘텐츠에서 링크 (요소) IFRAME에서 새 페이지를 로드 됩니다 각 링크에 "_parent" =.


· (해당 되는 경우이 컨텍스트는 유지) JavaScript 이벤트 처리기 탐색 요소에 연결 된 IFRAME의 컨텍스트에서 작동 합니다. 메인 페이지에 탐색 콘텐츠를 이동 하는 경우 이벤트 처리기는 메인 페이지에 정의 된 변수와 함수 액세스할 수 있습니다.


4, XMLHttpRequest
사용

사용자가 주로 인터넷 익스플로러 또는 Gecko 브라우저 (모질라, 파이어 폭스, 넷스케이프 7)의 최신 버전을 사용 하는 경우 다음 XMLHttpRequest 개체를 사용 하 여 귀하의 웹 페이지를 다운로드 하는 다른 콘텐츠를 결정할 수 있습니다. 첫 번째 단계는 앞에서 설명한 방법은 매우 비슷합니다. 각 자리 표시자에 대 한 로드 프로세스를 시작 하는 자바 스크립트 함수 호출 해야:


<div id= "header" >


< div 스타일 = "높이: 100px; 폭: 100% "></div>


<script>loadcontent ("머리글", "/ navigation/header.html")</script>


</div>

그러나
, loadcontent 함수는 근본적으로 다르다: 그것은 새로운 XMLHttpRequest 개체를 만듭니다, 이벤트 처리기를 할당 하 고 비동기적으로 로드 프로세스를 시작:


기능 없음; Loadcontent (id, url)


try {


var rq = 새로운 XMLHttpRequest ();


Rq.open ("얻을", url, True);


Rq.onreadystatechange 기능 ({contentloaded (rq, url, id)})
=

rq.send (NULL);


} catch (err) {


경고 ("로드할 수 없습니다" + "로" url + + id);


}


}


에 관심을 지불 하는


각 주요 브라우저 가족의 다른 방법으로 XMLHttpRequest 개체를 구현합니다. 이 호환성 문제를 처리 하는 가장 쉬운 방법은 Sarissa 같은 래퍼 라이브러리를 사용 하는 것입니다. 이 문서의 예제에서이 라이브러리를 사용 하 고.


콜백 함수 contentloaded는 XMLHttpRequest 개체 준비 하 고 완전 한 (해당 되는 경우 요청이 완료) 인지 확인 하 고 응답에서 HTML 태그를 추출 하는 일을 담당 합니다. HTML 코드를 추출 하는 가장 쉬운 방법은 (XHTML을 사용 하지 않으면 어떤 경우에 사용할 수 있습니다 XMLDOM 인터페이스) <body>그리고</body> 플래그 사이의 텍스트를 찾으려면 문자열 처리기 함수를 사용 하는:


함수 contentloaded (rq, url, id) {


try {


경우 (rq.readystate!= 4) {반환;}


경우 (Rq.status!=) {경고 ("로드 실패" + url); 반환; }


var txt = rq.responsetext;


//Find <body>태그
의 시작 위치

var startbodytag = txt.indexof ("< 몸")


//Find 모든 속성
를 건너뛰는 태그의 끝

var endofstarttag = Txt.indexof (">", startbodytag + 1)


//Find</body> 태그


var endbodytag = txt.indexof ("< / 바디")


경우 (Endbodytag = = 1) {Endbodytag = txt.length;}


//Extract 실제 콘텐츠


var bodycontent = txt.substring (Endofstarttag + 1, endbodytag)


경우 (bodycontent) {


var 개체 틀 = document.getElementById (ID);


placeholder.innerhtml = bodycontent;


}


} catch (err) {


경고 ("로드할 수 없습니다" + "로" url + + id);


}


}


XMLHttpRequest 개체를 사용 하 여 앞에서 설명한 IFrame 방법에 비해 다음과 같은 이점이 있다:


· 코드 청소기 이며 페이지의 컨텍스트 스위치에 의존 하지 않습니다.


· XMLHttpRequest 개체를 사용 하면 검색 하 고 (그것의 readystate 및 상태 특성)을 통해 오류를 처리할 수 있습니다. 오류가 발생 하는 경우 콘텐츠를 로드 하는 IFRAME을 사용 하 여만 매우 거친 오류 프롬프트 수 있습니다 표시 됩니다, 콜백 함수를 호출의 부족으로 인해 주로.


· 콘텐츠 요소 (이 섹션에 표시 된) 나 대역폭 사용량을 최소화 하기 위해 순차적 마운트 요청에 대 한 병렬 로드를 구현할 수 있습니다.




요약 대



가이 문서에는 콘텐츠를 둘러싸고 있는 탐색 요소에서 웹 페이지 콘텐츠를 분리 하는 방법을 배웠습니다. 검색 엔진이 페이지 콘텐츠의 더 초점 맞춘된 설명에 분리 결과 검색 하는, 그리고 또한 (이후 실제 콘텐츠 탐색 요소는 다운로드 하기 전에 사용자에 게 표시 됩니다) 저속 인터넷 접속을 사용 하는 사용자를 위한 로드 시간을 줄일 수 있습니다.


가이 시나리오를 활용 하 여 웹 페이지를 다시 디자인 하는 경우 일부 기본 형식을 탐색 검색 엔진 수를 페이지에 유지 되어야 합니다 마음에 사용자가 귀하의 사이트의 페이지 사이 탐색 하는 JavaScript를 사용 하지 않도록 결정 하십시오.


프레임 (IFRAME)을 포함된 하거나 탐색 요소의 지연된 로딩을 구현 하는 가장 현대적인 브라우저에서 구현 XMLHttpRequest 개체를 사용 수 있습니다. 그래서 당신은 당신이 매우 이전 버전과 호환성 문제에 관심 있다면 고려 하 고 접근 하는 것 이전 버전의 브라우저에서 IFrame 메서드를 지원할 수 있다. 다른 한편으로, XMLHttpRequest 개체를 사용 하 여 로드 프로세스를 보다 긴밀 하 게 제어 하 고 검색 하 고 다운로드 오류를 처리 하면.

웹 마 스 터 네트워크 뉴스 목록 Www.admin5.com/top