패스트캠퍼스 강의를 정리한 내용입니다.
"The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명"
SEO에 영향을 주는 요인들
- 검색 결과 페이지(SERP) 노출 대비 클릭률
- 백링크(backlink) : 다른 웹 페이지로부터 인용(링크)되는 횟수
- 도메인 권력(Domain authority) : 검색 결과 페이지 순위 예측 점수
- 페이지 타이틀
- 메타 디스크립션
- 로딩 속도
- SSL(https) 사용 여부
- 콘텐츠의 양, 질, 개연성
- 사용자 경험: LCP(최대 콘텐츠 블럭 그리기), CLS(누적 배치 변경)
*크롬 확장프로그램 Lighthouse을 통해 검색 엔진 최적화 점수 확인 가능
페이지 타이틀
명세
- 분류 : 메타데이터 콘텐츠
- 문맥 : head 요소의 자식
- 콘텐츠 모델 : 텍스트. 공백만으로 구성할 수 없음
- 태그 생략: 시작 태그와 종료 태그 모두 생략 불가능
Accessibility
- 화면 낭독기 사용자는 웹 페이지 접속 시 페이지 타이틀을 음성으로 전달 받음
- 페이지 타이틀을 통해 요청한 페이지에 접속했는지 빠르게 판단 가능
- 화면 낭독기 사용자는 반복 키워드나 불필요한 설명은 건너뛰기 위해 낭독 속도를 두배속 이상 빠르게 하여 속청으로 듣기 때문에 간결하게 중요 키워드로 타이틀을 구성하는 것이 좋음
구분자
-
대시(-), 파이프(|), 콜론(:)을 추천
Page title - Site name
Page title | Site name
Page title : Site name -
대시(-)를 사용하면 키워드 사이의 공간이 더 크기 때문에 가독성 증가
-
파이프(|), 콜론(:)은 장평이 적기 때문에 공간을 더 효율적으로 사용 가능
-
언더바(_)는 인접 키워드를 하나로 연결하므로 비추천
JavaScript
- 검색로봇은 JavaScript에 의해 동적으로 생성한 페이지 타이틀도 크롤링
모범 사례
백악관 : The Biden-Harris Administration | The White House
W3 : All Standards and Drafts - W3C
삼성 : 갤럭시 S | Samsung 대한민국
Summary
- 본문을 가장 잘 설명하는 키워드 중심으로 작성
- 페이지마다 구체적이고 고유한(흔하지 않은) 키워드를 사용
- 페이지마다 반복하는 키워드 최소화
- 구체적인 키워드를 앞으로 배치
- 가능한 짧게 작성 (Depth는 max 3단계까지 권장)
Metadata
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="description" content="A description of the page">
// keywords는 구글 검색 엔진에서 참조하지 않는 값이므로 생략해도 무방함
<meta name="keywords" content="shirts, pants, blouse, ...">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page title - Site name</title>
</head>
</html>-
HTML
<head>요소에 들어가는 태그 -
검색 엔진을 위해서 들어가는 태그
lang
- 검색 로봇이나 화면 낭독기에 값을 전달하여 적절한 음성 엔진을 채택하도록 도와주고 검색 결과에 잘 표시될 확률을 높여줌
- 구글은 웹 랭킹에서 메타 키워드를 사용하지 않음
https://developers.google.com/search/blog/2009/09/google-does-not-use-keywords-meta-tag - 접근성 지침에서는 반드시 선언되어야 하는 속성으로 명시되어 있음
charset
<meta charset="utf-8">- utf-8
- 표준이 되는 값
- 모든 국가의 언어를 웹페이지에 표시 가능하게 해줌
description
<meta name="description" content="A description of the page">- 검색 결과 화면에 노출되는 텍스트
- 사이트에 대한 설명 작성
<meta name="keywords" content="">- 구글 검색 엔진에서 이 값은 참조하지 않음
viewport
<meta name="viewport" content="width=device-width, initial-scale=1">- 웹페이지를 모바일에서 볼 수 있도록 최적화 했는지에 대한 정보를 검색 엔진에 제공
- 화면 크기의 기준을 정해주는 속성
- 화면에 보이는 만큼이 viewport가 되도록 선언하는 것
*브라우저에서는 화면 크기, 모바일에서는 문서 전체의 크기가 viewport가 됨 - width=device-width (viewport를 화면 크기로 설정)
- initial-scale=1 (줌 비율을 1로 설정)
Frontend Developer