-
2년 전부터 SEO를 접하기 시작했습니다. 그 당시 배움에 대한 열풍으로 인해 국내 여러 포럼과 블로그를 방문하게 되었고, 실무에 도움이 될지 쓸모가 없을지 모르는 모든 방법을 사용하게 되었습니다. 그런데 시간이 지날수록 딥러닝이 나오더군요. 인터넷에 떠돌고 있는 다양한 방법들에 의심이 생겼습니다. 링크 보내기, 소프트 기사 작성, 키워드 쌓기 등의 방법이 지쳤을 때에도 나는 그들을 이길 수 없었습니다. 순위와 트래픽에 대한 고민과 동시에 SEO의 더 깊고 효과적인 운영 방법에 대해 고민해야 했습니다. 저는 프로그래밍과 프론트엔드 개발이라는 예전 분야로 돌아왔습니다. ". 하룻밤 사이에 내가 지금 무엇을 하고 있는지가 갑자기 명확해진 것 같았습니다. 최고의 SEO 아닌가요?
솔직히 말해서 내 공부는 상대적으로 폐쇄적이다. 나는 "최고의 SEO는 SEO가 아니다"라는 상태에 도달하지 못했고, 나는 현재의 직업을 더 좋게 만드는 방법에 대해 아주 좋은 SEO 실무 경험도 갖고 있지 않습니다. SEO에 통합되어 지금의 SEO를 정의한다면 네트워크 + 하드웨어 + 프로그램 + 사이트 구조 + 웹 표준 + 콘텐츠 + 사람이 될 것입니다. 인터넷에서 많은 사람들이 "콘텐츠가 왕이다"라는 개념을 논의하고 있습니다. "이지만 다른 많은 요소는 무시됩니다. 이러한 요소를 자세히 설명하면. 매우 두꺼운 책이 출판될 수 있을 것으로 추정됩니다. 이 기사는 단지 WEB 표준이 SEO에 미치는 영향을 여러분과 공유하고자 하는 것입니다.
텍스트 시작:
웹 표준과 SEO의 관계를 이해하려면 먼저 "웹 표준"이 무엇인지 이해해야 합니다. 인터넷에서 많은 설명 문서를 확인했지만 여전히 약간 혼란스럽고 혼란스러워하고 싶지 않습니다. 인터넷에서 배우기 위해 한 단락을 복사해 놓았지만 결국에는 여전히 이해할 수 없습니다. 웹 표준을 이해하려면 기본 웹 페이지를 구축하는 것부터 시작해야 합니다.
예를 들어, 가장 간단한 웹 페이지를 작성하려면 html 태그를 사용해야 합니다. 예를 들어 텍스트를 강조하려면 <strong> 태그를 사용해야 합니다. <font color="color" > 태그를 추가해야 하는데 새 문단을 시작하고 싶어서 < > 태그를 사용해야 하는데 의미 없는 <jacu> 태그를 사용하여 텍스트를 강조할 수는 없습니다. 그런 태그가 전혀 없고 브라우저가 이를 분석할 수 없기 때문에 조직인 W3C(World Wide Web) 협회)가 일어나 전 세계 인터넷 실무자들에게 다음과 같이 말했습니다. 사용할 수 있고 사용할 수 없는 것은 모두가 이 레이블이 무엇에 사용되는지 이해할 수 있도록 통일되고 합리적인 설명을 제공할 것입니다." 수많은 논의 끝에. 그 결과, HTML 1.0 표준이 마침내 도입되었습니다. 이후의 수정과 업데이트를 거쳐 HTML 2.0과 같은 더 많은 웹 표준이 점차 출시되었습니다. 모든 웹페이지에서 가장 일반적으로 사용되는 xmhtml1.0/1.1인 .html 4.01과 아직 공식적으로 출시되지 않은 xmhtml 2.0 표준은 모두 향후 버전과 호환됩니다. 웹페이지를 만들 때 일반적으로 맨 위에 있습니다. 웹페이지의 다음과 같은 문장입니다:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
이는 실제로 xhtml 1.0 표준을 사용하여 설명되는 문서 모델을 정의합니다.
하지만 나중에는 웹 페이지 레이아웃이 점점 더 복잡해졌습니다. 이러한 HTML 태그에만 의존하면 아름답고 아름다운 페이지를 만드는 것이 불가능했습니다. 예를 들어 특정 요소를 상쇄하고 싶었습니다. 그림을 20픽셀로 늘리거나 텍스트 간격을 5픽셀로 늘리고 싶었는데 HTML에만 의존해서는 정말 어렵습니다. 이때 W3C는 더 이상 가만히 있을 수 없어 일어서서 "이 기능을 달성하기 위해 뭔가를 더 정의하자"고 외쳤다. 수많은 논의 끝에 CSS 1.0 표준이 발표됐다. 이를 사용하면 콘텐츠 오프셋, 간격 및 기타 효과를 쉽게 얻을 수 있습니다. 개발 후에는 CSS 2.0과 CSS 3.0이 나왔습니다. CSS로 스타일을 정의할 때 모든 사람은 이 표준을 따라야 합니다.
나중에 사람들은 HTML과 CSS에만 의존하는 것이 여전히 완벽하지 않다는 것을 발견했습니다. 인간-컴퓨터 인터페이스 상호 작용이 부족하고 동적 효과를 얻을 수 없습니다. 웹 페이지의 내용을 이동할 수 있다면 더 좋을 것입니다. 그래서 w3c는 문서 개체 모델 인터페이스를 규정하는 emascript 표준을 도입했습니다. 문법 등 예를 들어 일반적으로 사용되는 javascript는 emascript 표준을 따릅니다.
자, 이제 모든 것이 완벽해진 것 같습니다. html 표준, css 표준 및 emascript 표준을 사용하면 마침내 아름다운 웹 페이지를 만들 수 있습니다. 이러한 표준을 모아서 웹 표준에 맞는 웹 페이지는 무엇입니까?
예를 들어, HTML 조각은 다음과 같이 작성됩니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<머리>
<title>데모</title>
</head>
<본문>
<p><font color="#ff0000">텍스트 콘텐츠</font><p>
<img src="x.jpg" />
<DL>
<dt><h1>제목</h1></dt>
<dd>콘텐츠</dd>
<dd>콘텐츠</dd>
<DL>
<b>콘텐츠</b>
</body>
그러면 이 코드는 웹 표준을 준수합니까? 첫 번째 줄에서 문서 유형을 xhtml 1.0으로 정의합니다. 이는 첫 번째 줄에서 모든 html 태그를 작성해야 함을 의미합니다. 본문의 <p> 태그에서 글꼴 태그는 이 표준에서 더 이상 사용되지 않으며, 색상 속성도 이 태그에서 더 이상 사용되지 않으므로 이 문단은 웹 표준을 따르지 않습니다. <img>를 살펴보겠습니다. align 속성은 이미지의 정렬을 정의하지만 xhtml 1.0 표준에서는 img가 alt 속성을 정의해야 합니다. 따라서 이 코드는 1.0 표준을 준수하지 않습니다. , dt는 제목을 정의합니다. <h1> 태그는 xhtml 1.0에 정의된 대로 중첩됩니다. <h1> 태그의 중첩은 <dt> 태그에서 허용되지 않으므로 1.0 표준도 충족하지 않습니다. 마지막 <b> 태그를 보세요. 감사합니다. 이 태그는 마침내 웹 표준을 준수합니다. 하지만 w3c는 그렇게 말했습니다. 당분간은 이 라벨의 의미를 그대로 유지하겠습니다. 그러나 더 의미 있는 <strong> 태그를 사용하는 것이 좋습니다. 추후 새로운 표준에서는 표준 태그로서의 <b> 태그를 취소할 수 있습니다. HTML 표준의 제약사항에 대해서는 해당 문서를 확인하시기 바랍니다.
말하자면. 모두가 이해한다고 생각합니다. 이 페이지는 xmhtml 1.0 표준도 준수하지 않으므로 웹 표준을 준수하지 않습니다. 웹 표준을 준수하는지 여부는 모두 정의한 버전에 따라 다릅니다. 그러나 이 코드는 일반적으로 구문 분석될 수 있습니다. 위에서 언급했듯이 표준은 모두 이후 버전과 호환되지만 현재 정의한 표준을 따르지 않습니다. 그렇다면 이 코드를 내 웹 표준에 따르려면 어떻게 해야 할까요? 방법은 두 가지뿐입니다. 1. 문서 모델의 표준을 낮추십시오. (이로 인해 더 많은 문제가 발생할 수 있습니다.) 2. 스타일 속성, img 및 alt 속성에 색상을 넣는 등 코드를 다시 수정하십시오. 이에 비해 우리는 두 번째를 더 선호합니다. 유형.
인터넷에 설명이 있습니다: 웹 표준 = div + css. 위의 기사를 읽고 나면 이해하기 어렵지 않습니다. 이 개념은 순전히 혼란스럽고 지나치게 일반화되어 있습니다. 테이블 레이아웃이 있는 웹 페이지가 웹 표준을 준수하지 않는다고 말할 수는 없습니다. W3C는 테이블 레이아웃을 사용하는 것이 표준을 준수하지 않는다고 정의한 적이 없습니다. <table> 태그는 항상 모든 버전의 표준 태그였습니다. 우리는 모두 레이아웃을 위해 div를 사용하지만 다른 사람들이 권장하는 방식은 표준과 동일하지 않다는 점을 이해해야 합니다.
앞서 언급했듯이 웹 표준은 html/css/js를 작성할 때 정의한 버전에 따라 다릅니다. 예를 들어 내 HTML이 xhtml 1.0 표준을 사용한다면 내 HTML도 xhtml 1.0 표준을 준수해야 합니다. 그러나 이는 사실이 아닌 것 같습니다. 인터넷에 있는 웹 페이지의 거의 99.999%가 검증을 통과할 수 없습니다. w3c 공식 웹사이트(http://www.w3)에는 항상 어떤 종류의 오류가 있습니다. .org는 검증을 통과할 수 있습니다. 관심 있는 친구가 테스트해 볼 수 있습니다. 현재 우리 기사는 막다른 골목에 도달한 것 같습니다. 웹 표준을 준수하지 않는 웹 페이지도 많기 때문에 좋은 순위와 트래픽을 얻을 수도 있습니다. 웹 표준 SEO와의 연관성은 무엇입니까? html 구조와 파싱부터 시작해야 합니다.
웹 디자인은 구조(html)와 표현(css)의 분리를 강조합니다. 이러한 방식으로 개념을 이해할 수 있습니다. 구조는 집이다. 철근콘크리트와 벽돌로 만든 선반이며, 퍼포먼스는 집의 벽을 칠하고, 바닥을 설치하고, 장식하는 것과 같다. 구조가 없으면 성능에는 실제 성능 값이 없으므로 <font color="#ccc" size="12">텍스트</font> 또는 이러한 태그나 속성이 있습니다. 구조의 경우 성능에 더 가깝기 때문입니다. 이는 프레젠테이션 레이어, 즉 CSS에 있어야 합니다. xhtml 1.0 엄격한 페이지에 글꼴 태그를 적용하면 실제로도 올바르게 구문 분석될 수 있습니다. 왜냐하면 첫 번째 기사에서 말했듯이 표준은 이후 버전과 호환되기 때문입니다. .
브라우저와 검색 엔진이 HTML을 구문 분석하는 방법을 이해해 봅시다. 여기서 브라우저에 대해 이야기하는 이유는 제 생각에는 검색 엔진과 브라우저가 웹 페이지를 크롤링할 때 거의 동일한 방법을 사용하기 때문입니다. 이는 결국 전체 페이지를 엄격한 부모-자식 관계 노드가 있는 DOM 트리로 구문 분석합니다. 그런 다음 예를 들어 다음 코드를 작성할 때 사용자에게 표시합니다.
<!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>
<본문>
<div id="맨 위">
<h1>제목입니다<h1>
<img src="xx.jpg"/>
<p><strong>텍스트</strong>입니다<p>
</div>
<div id="컨테이너">
<h2>이것은 다른 제목입니다</h2>
<p>이것은 또 다른 <strong>텍스트</strong>입니다.</p>
</div>
</body>
</html>
이것은 xhtml 1.0 전환 표준에 따른 HTML 조각임을 알 수 있습니다. 오류에는 다음이 포함됩니다. 첫 번째 div의 <h1> 태그에는 닫는 태그가 없습니다. img에는 alt 속성이 없습니다. <p> 태그 닫는 태그도 없습니다.) 그러나 이 코드를 브라우저에 넣고 실행하면 <h1> 태그가 작동하는 것을 볼 수 있습니다. P 태그도 작동하고 그림이 표시될 수 있습니다. 왜 이 코드에는 올바른 태그가 없지만 브라우저에서 올바르게 구문 분석될 수 있는지 매우 놀랐습니다. dom 구조는 아래 그림과 같아야 합니다(그림 1).
전날 16시 58분에 첨부파일(16.49KB) 업로드 및 다운로드
브라우저가 잘못된 코드를 올바르게 구문 분석할 수 있는 이유는 무엇입니까? 그리고 에러 코드의 진짜 의도를 '추측'할 수 있는 것 같습니다. 원칙은 태그 트리를 구축할 때 브라우저가 사전 분석 모드와 대조 모드(html tidy)를 사용한다는 것입니다. 간단히 말해서, 브라우저는 모든 태그와 속성을 내장 사전에 있는 정보와 일치시킵니다. 일치가 정상이면 직접 구문 분석됩니다. 마무리 모드를 활성화하면 잘못된 코드를 분석하여 수정합니다. 예를 들어 위의 마지막에 있는 <h1> 및 <p> 태그는 자동으로 닫는 태그로 변경되거나, <jiacu> 텍스트</ jiacu> 태그 쌍. 이는 전혀 일치할 수 없으며 복구할 수 없습니다. 잘못된 태그 쌍을 직접 지우고 내부에 텍스트만 남깁니다. 물론 HTML을 DOM 트리로 구문 분석하면 HTML 소스 코드가 변경되지 않습니다. 이는 단지 구문 분석 작업일 뿐입니다. 따라서 페이지에서 HTML 오류를 확인하지 않으면 이러한 오류를 찾을 수 없는 경우가 많습니다. . 브라우저가 자동으로 문제를 해결해 주었기 때문입니다. 일반적으로 브라우저는 HTML 오류에 대한 완전한 호환성을 보장합니다. 도움이 된다면 수정하세요. 중복된 태그나 속성을 지울 수 있으면 지워집니다. 지울 수 없고 수정할 수 없는 경우 정상적인 표시를 위해 태그가 자동으로 제거됩니다.
그러나 "구성 모드"는 전능하지 않습니다. 브라우저가 모든 오류를 수정하는 데 도움이 될 것이라고 기대할 수는 없으므로 페이지가 점점 더 많은 태그와 콘텐츠로 중첩될 때가 많습니다. 브라우저가 태그를 수정할 수 없는 경우, 브라우저가 할 수 있는 유일한 작업은 "오류 블록 내의 모든 태그를 제거하고 내용만 유지"하는 것입니다.
검색 엔진의 관점에서 콘텐츠를 분석하기 전에 전제는 브라우저의 전제와 동일하며, 이 트리가 완성되어야만 검색 엔진이 페이지의 컨텍스트 관계를 결정할 수 있습니다. <strong>, <h1> 등의 가중치 태그가 페이지와 배포 위치 등에 사용됩니다. 그러나 검색 엔진은 구문 분석 시 "콘텐츠 블록", 즉 블록당 하나의 태그 개념을 더 강조합니다. 여전히 위의 HTML 예입니다. 검색 엔진이 이 DOM 트리를 구축할 때 첫 번째 div의 <h1> 태그를 구문 분석할 때 오류가 있음을 발견했습니다. 이때 P 태그를 구문 분석할 때 또 다른 오류가 발생했습니다. 이 DOM 트리를 올바르게 빌드하면 마무리 모드가 활성화되지만 현재 모드는 오류를 수정하는 데 도움이 되지 않고 "블록"에서 도움이 될 수 있습니다. 오류 블록(노드)의 상위 블록(노드)을 검색합니다(상위 블록에 오류가 있으면 계속해서 상위 블록을 검색합니다). -이 상위 레벨 블록의 블록 및 하위 블록이 검색됩니다. 하위 블록의 모든 잘못된 태그가 제거됩니다. 즉, <div id="top"> 내의 모든 잘못된 태그가 제거됩니다. 구성된 트리는 위의 그림 2와 같습니다(2011.4.5 개정: 그림 2에 작은 실수가 있습니다. 왼쪽 div 태그 아래에 img 태그가 있습니다).
이런 식으로, 우리가 주의 깊게 작성한 <h1> 및 <strong> 태그가 파싱 후에 사라지고, 전체 블록의 "가중치"가 이동한 것을 HTML 파싱의 원리에 따라 쉽게 그릴 수 있습니다. 결론:
1. 페이지 노드 수준이 점점 더 높아질수록 라벨 수준 오류에 특히 주의해야 합니다. 예를 들어 종료 태그를 적게 작성해야 할 수 있습니다. SEO에 치명적이다.
2. 어떤 레이아웃을 사용하든 노드 중첩 수준이 적을수록 좋습니다. 첫째, 노드를 구문 분석할 때 검색 엔진의 부담을 줄일 수 있습니다. 둘째, 검색 엔진이 노드 간의 (컨텍스트) 관계를 더 쉽게 결정할 수 있습니다. , 키워드의 가중치가 중요합니다.
3. 라벨의 속성을 CSS로 대체할 수 있는 경우에는 최대한 CSS로 옮겨주세요.
4. 브라우저와 검색 엔진 모두 HTML 오류를 허용하지만, 동일한 외부 조건에서 표준 HTML이 더 나은 순위를 얻는 것이 분명히 더 쉽습니다.
이 기사를 작성하는 데 거의 4시간이 걸렸습니다. 일부 내용은 세 번째 기사에서 공유하겠습니다.
기사 출처: Lightyear Forum(재인쇄 시 출처 링크와 저자를 명시해 주세요)
기사 작성자: newyhj