검색 엔진 밥상 차려주기

Yudrey·2022년 3월 18일
0

패스트캠퍼스 강의를 정리한 내용입니다.
"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

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로 설정)
profile
Frontend Developer

0개의 댓글