>  기사  >  시스템 튜토리얼  >  프런트엔드 SEO - 자세한 설명

프런트엔드 SEO - 자세한 설명

WBOY
WBOY앞으로
2024-03-12 18:13:02752검색

프런트엔드 SEO - 자세한 설명

1. 검색 엔진 작동 방식

입력창에 키워드를 입력할 때 검색이나 쿼리를 클릭하면 결과가 나옵니다. 그 뒤에 숨겨진 이야기를 파헤쳐 보면 검색 엔진은 많은 일을 합니다.

Baidu와 같은 검색 엔진 웹사이트에는 수많은 키워드를 저장하는 매우 큰 데이터베이스가 있으며, 각 키워드는 많은 URL에 해당합니다. 이러한 URL은 방대한 인터넷에서 Baidu 프로그램에 의해 수집됩니다. 몇 번만 다운로드하면 이러한 프로그램을 "검색 엔진 스파이더" 또는 "웹 크롤러"라고 합니다. 이 열심히 일하는 "거미"는 매일 인터넷에서 한 링크에서 다른 링크로 크롤링하여 콘텐츠를 다운로드하고 분석 및 수정한 다음 "거미"가 키워드가 데이터베이스에 없다고 생각하고 검색하는 경우. 사용자에게는 유용하지 않으며, 유용한 정보는 데이터베이스에 저장됩니다. 반대로, "스파이더"가 스팸이나 중복된 정보라고 생각하면 이를 폐기하고 크롤링을 계속하여 최신의 유용한 정보를 찾고 사용자가 검색할 수 있도록 저장합니다. 사용자가 검색하면 해당 키워드와 관련된 URL이 검색되어 방문자에게 표시될 수 있습니다.

한 키워드가 여러 개의 URL과 일치하므로 정렬에 문제가 있습니다. 따라서 해당 키워드와 가장 잘 일치하는 URL이 먼저 표시됩니다. '스파이더'가 웹 콘텐츠를 크롤링하고 키워드를 정제하는 과정에서 '스파이더'가 이를 이해할 수 있는지 여부에 문제가 있습니다. 웹사이트 내용이 flash, js라면 이해하기 어렵고 혼란스러우며, 키워드가 적절하더라도 쓸모가 없습니다. 따라서 웹 사이트 콘텐츠가 언어라면 이해할 수 있고 언어는 SEO입니다.

2. SEO 소개

전체 이름: 검색 영어 최적화, 검색 엔진 최적화. 검색 엔진이 등장한 이후로 SEO가 탄생했습니다.

존재의의미: 검색 엔진의 자연 검색 결과에서 웹페이지의 수와 순위 위치를 향상시키기 위해 최적화 동작이 수행됩니다. 간단히 말해서, 우리는 Baidu와 같은 검색 엔진에 우리가 세심하게 제작한 웹사이트가 더 많이 포함되기를 바라며, 다른 사람들이 방문할 때 해당 웹사이트가 1위가 되기를 바랍니다.

카테고리: White Hat SEO 및 Black Hat SEO. White hat SEO는 웹 사이트 디자인을 개선하고 표준화하여 웹 사이트를 검색 엔진과 사용자에게 더욱 친숙하게 만드는 역할을 하며, 웹 사이트는 검색 엔진에서 권장하고 지원하는 합리적인 트래픽을 검색 엔진에서 얻을 수도 있습니다. Black Hat SEO는 더 많은 사용자 방문을 얻기 위해 검색 엔진 정책의 결함을 사용하고 증폭시킵니다. 이러한 행위의 대부분은 검색 엔진을 속이고 일반 검색 엔진 회사에서 지원하거나 장려하지 않습니다. 이번 글은 화이트햇 SEO에 초점을 맞췄는데, 화이트햇 SEO는 무엇을 할 수 있을까요?

1. 웹사이트의 위치를 ​​반영하고 검색 엔진이 웹사이트의 기능을 이해할 수 있도록 웹사이트의 제목, 키워드 및 설명을 신중하게 설정하세요.

2. 웹사이트 콘텐츠 최적화: 콘텐츠와 키워드 간의 대응, 키워드 밀도 증가

3. 웹사이트에서 Robot.txt 파일을 올바르게 설정하세요.

4. 검색 엔진 친화적인 사이트 맵을 생성합니다.

5. 외부 링크를 추가하고 다양한 웹사이트에서 홍보하세요.

3. 프론트엔드 SEO

웹사이트의 구조적 레이아웃 디자인과 웹페이지 코드 최적화를 통해 프런트 엔드 페이지는 브라우저 사용자와 "스파이더" 모두가 이해할 수 있습니다.

(1) 웹사이트 구조 및 레이아웃 최적화: 최대한 단순하고 요점을 명확하게 전달하며 평면적인 구조를 옹호합니다.

일반적으로 말하면, 만드는 웹사이트 구조의 수준이 낮을수록 "스파이더"에 의해 크롤링되고 포함되기 쉽습니다. 일반적으로 중소규모 웹사이트의 디렉토리 구조는 3단계를 넘고, '스파이더'는 '어둠 속에서 길을 잃으면 어떡하지'라며 기어 내려가는 것을 꺼린다. 관련 조사에 따르면 방문객이 세 번 점프한 후에도 필요한 정보를 찾지 못하면 떠날 가능성이 높습니다. 따라서 3계층 디렉터리 구조도 경험을 위한 요구 사항입니다. 이를 위해서는 다음이 필요합니다:

1. 홈페이지 링크 수를 제어하세요

웹사이트의 홈페이지는 가중치가 가장 높은 곳입니다. 홈페이지에 링크가 너무 적고 "브리지"가 없으면 "스파이더"가 내부 페이지로 계속해서 크롤링할 수 없으며 이는 숫자에 직접적인 영향을 미칩니다. 포함된 웹사이트의 수입니다. 그러나 홈페이지에 링크가 너무 많아지면 실질적인 링크가 없어 사용자 경험에 쉽게 영향을 미치고 웹 사이트 홈페이지의 무게가 줄어들며 포함 효과가 떨어집니다. 안 좋아.

따라서 중소기업 웹사이트의 경우 홈페이지 링크는 100개 이하로 유지하는 것이 좋습니다. 링크의 성격에는 페이지 탐색, 하단 탐색, 앵커 텍스트 링크 등이 포함될 수 있습니다. 사용자의 좋은 경험을 바탕으로 사용자가 우수한 정보를 얻을 수 있도록 안내합니다.

2. "스파이더"가 단 3번의 점프만으로 웹사이트의 모든 내부 페이지에 접근할 수 있도록 디렉터리 계층 구조를 평탄화합니다. "식물" --> "과일" --> "사과", "오렌지", "바나나"와 같은 평면 디렉터리 구조에서는 레벨 3을 통과하면 바나나를 찾을 수 있습니다.

3.내비게이션 최적화

탐색은 가능한 한 텍스트 기반이어야 하며 이미지 탐색과 결합할 수도 있지만 이미지 코드는 최적화되어야 합니다. 프런트엔드 SEO - 자세한 설명태그는 검색 엔진에 위치를 알리기 위해 "alt" 및 "title" 속성을 추가해야 합니다. 내비게이션을 통해 이미지가 정상적으로 표시되지 않더라도 사용자는 프롬프트 텍스트를 볼 수 있습니다.

둘째, 탐색경로 탐색은 모든 웹 페이지에 추가되어야 합니다. 이점: 사용자 경험 관점에서 사용자가 전체 웹 사이트에서 자신의 현재 위치와 현재 페이지의 위치를 ​​파악할 수 있어 사용자가 웹 사이트의 구성을 빠르게 이해할 수 있습니다. .형태를 통해 더 나은 위치 감각을 형성하는 동시에 "스파이더"에 대한 사용자 작업을 용이하게 하기 위해 각 페이지로 돌아갈 수 있는 인터페이스를 제공하여 웹 사이트의 구조를 명확하게 이해할 수 있으며 또한 많은 수를 추가합니다. 쉬운 크롤링을 위한 내부 링크.

4. 웹사이트의 구조적 레이아웃 - 무시할 수 없는 디테일

페이지 헤더: 로고, 기본 탐색 및 사용자 정보.

페이지 본문: 왼쪽의 본문, 오른쪽의 인기 기사 및 관련 기사 포함 이점: 방문자를 유지하고 "스파이더"의 경우 관련 링크입니다. , 이는 페이지의 관련성을 향상시킵니다. 또한 페이지의 가중치를 향상시킬 수도 있습니다.

페이지 하단: 저작권 정보 및 친숙한 링크.

특별 참고 사항: 페이징 탐색을 작성하는 권장 방법은 "홈 1 2 3 4 5 6 7 8 9 드롭다운 상자"입니다. 그러면 "스파이더"가 해당 페이지 번호에 따라 직접 이동할 수 있고 드롭- 아래 상자는 이동할 페이지를 직접 선택합니다. 다음 쓰기 방법은 권장되지 않습니다. "홈 페이지 다음 페이지 마지막 페이지", 특히 페이지 수가 특히 많은 경우 "스파이더"가 크롤링하기 전에 여러 번 기어 내려야하므로 매우 피곤하고 쉽게 제공됩니다. 위로.

5. 페이지 크기를 제어하고, http 요청을 줄이고, 웹사이트 로딩 속도를 향상시킵니다.

페이지당 100k를 초과하지 않는 것이 가장 좋습니다. 너무 크면 페이지가 느리게 로드됩니다. 속도가 매우 느리면 사용자 경험이 좋지 않고 방문자를 유지할 수 없으며 시간 초과가 발생하면 "거미"도 떠나게 됩니다.

 (2)웹페이지 코드 최적화

1. 제목: 중요한 키워드를 앞에 두세요. 키워드를 모든 페이지에 포함시키세요. 제목에 동일한 내용을 설정하지 마세요.

2. 태그: 키워드, 여러 페이지의 중요한 키워드를 나열하고, 이를 너무 많이 채우는 것을 잊지 마세요.

3. 태그: 웹 페이지 내용에 대한 상위 수준 요약이 필요한 웹 페이지 설명입니다. 너무 길거나 키워드로 너무 많이 채워서는 안 됩니다.

4. 태그: 코드를 가능한 한 의미있게 만들고, 적절한 위치에 적절한 태그를 사용하고, 올바른 태그를 사용하여 올바른 작업을 수행하세요. 소스 코드 리더와 "스파이더" 모두에게 명확하게 설명하십시오. 예를 들어 h1-h6은 제목 클래스에 사용됩니다.

5. 하이퍼링크 태그: 인페이지 링크의 경우 방문자와 "스파이더"가 알 수 있도록 설명하기 위해 "제목" 속성을 추가합니다. 다른 웹사이트로 연결되는 외부 링크는 "스파이더"가 외부 링크를 크롤링하면 다시 돌아오지 않기 때문에 "스파이더"에게 크롤링하지 않도록 알리기 위해 el="nofollow" 속성을 추가해야 합니다.

6. 텍스트 제목에 h1 태그를 사용하세요. "Spider"는 이것이 가장 중요하다고 생각합니다. h1이 마음에 들지 않으면 CSS를 통해 h1의 기본 스타일을 설정할 수 있습니다. 본문 제목에는 h1 태그를, 자막에는 h2 태그를 사용해 보되, h 제목 태그를 다른 곳에 함부로 사용해서는 안 됩니다.

7. 줄바꿈 태그: 텍스트 내용의 줄바꿈에만 사용됩니다

8. 테이블에는 테이블 제목 태그를 사용해야 합니다

9. 이미지는 "alt" 속성을 사용하여 설명해야 합니다

10. 라벨을 굵게 강조: 강조가 필요할 때 사용하세요. 굵은 태그는 검색 엔진에서 높은 평가를 받을 수 있으며, 강조 태그의 강조 효과는 굵은 태그 다음으로 중요합니다.

10. 텍스트 들여쓰기에는 특수 기호를 사용하지 마십시오. CSS를 사용하여 설정해야 합니다. 저작권 기호에 특수 기호 ©를 사용하지 마십시오. 입력 방법인 "banquan"을 직접 사용하고 일련 번호 5를 선택하여 저작권 기호 ©를 입력할 수 있습니다.

12. CSS 레이아웃을 현명하게 사용하고 중요한 콘텐츠의 HTML 코드를 앞쪽에 배치합니다. 가장 중요한 콘텐츠로 간주되어 콘텐츠 키워드를 포착하기 위해 "스파이더"가 읽을 수 있는 우선순위가 부여됩니다.

13. "거미"가 인식하지 못하므로 중요한 콘텐츠를 출력하는 데 JS를 사용하지 마세요

14. "스파이더"는 일반적으로 내부의 콘텐츠를 읽지 않으므로 iframe을 최대한 적게 사용하세요

15. 표시 사용: 없음 주의: 표시하고 싶지 않은 텍스트 콘텐츠의 경우 z-index를 설정하거나 브라우저 표시 외부에 설정해야 합니다. 검색 엔진은 display:none의 콘텐츠를 필터링하기 때문입니다.

16. 지속적으로 코드를 단순화하세요

17. js 코드가 DOM을 동작시키려면 body 종료 태그 앞, html 코드 뒤에 위치해야 합니다.

-------------------------------------- ---------- 웨이터님, 바퀴 두 개 주세요!

위 내용은 프런트엔드 SEO - 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 linuxprobe.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제