강의를 봅시다.
SEO에 영향을 주는 요인들
- 검색결과 페이지 노출 대비 클릭률
- 백링크 : 다른 웹 페이지로부터 인용되는 회수
- 도메인 권력 : 검색 결과 페이지 순위 예측 점수
- 페이지 타이틀
- 메타 디스크립션
- 로딩 속도
- https 사용여부
페이지 타이틀 명세
분류 : 메타데이터 콘텐츠
문맥 : head 요소의 자식
콘텐츠 모델 : 텍스트만 사용 가능 (검색엔진이 가장 많이 참고하는 것이
태그 생략 : 시작 태그와 종료 태그 모두 생략 불가능.
페이지 타이틀 비교
A : X툰
B : 실시간 - 랭킹 - 웹튼 - XX 코믹스
이렇게 비교했을 때 B가 더 검색이 잘 될 확률이 높음.
LightHouse를 이용하면 검색엔진 최적화를 비교할 수 있다.
검색 엔진은 title 태그, heading 태그를 참고한다.
페이지마다 각각 다른 title을 이용하면 더 좋다.
페이지 타이틀 구분자
| 대시(-) / 파이프 ( | ) / 콜론 (:을 추천 |
Page Title - Site Name
Page Title | Site Name
Page Title : Site Name
대시를 사용하면 가독성이 좋고, 파이프, 콜론을 사용하면 공간을 더 효율적으로 사용 가능.
페이지 타이틀 모범 사례
The Biden-Harris Administration The White House - All Standars and Drafts - W3C
갤럭시 S Samsung 대한민국
페이지 타이틀 요약
- 본문을 잘 설명하는 키워드 중심으로
- 페이지마다 구체적이고 고유한 키워드 사용
- 페이지마다 반복하는 키워드 최소화
- 키워드를 앞으로 배치
- 가능한 짧게
Metadata - html, head
html lang=”ko”
lang 속성은 특정 언어의 검색을 도와주기도 하고
화면 낭독기를 사용하는 사람들에게 어떤 언어를 선택해야 하는지 도움을 주기도 한다.
하지만 구글이 lang 속성을 신뢰하지 않는다고 한다.
예전에 개발자들이 html 태그를 다 복사해서 써서 한국에서 만든 많은 사이트들이 en인 경우가 많았기 때문..
그래도 접근성 측면에서는 중요하니까 ko로 해주자.
utf-8
utf-8로 해야지 모든 언어를 표시할 수 있다.
description
1
<meta name="description" content="설명">
Description은 검색 결과에 노출되는 텍스트다.
검색 결화 화면에 사이트에 대한 설명을 표시하고 싶으면 이것을 사용.
keywords
구글이 참고하지 않음.
viewport
1
<meta name="viewport" content="width-device-width, innitial-scale=1">
모바일에서도 볼 수 있는지 최적화가 되어 있는가를 나타내는 태그
PC에서는 화면 크기를 마음대로 조절할 수 있지만
모바일에서는 화면에 보이는 만큼만이 viewport가 된다.
구글이 참고하기 때문에 적어주는 것이 좋다
구조화된 데이터
네이버에서는 연관 채널을 크롤링해가는 기능이 있다.
JSON-LD형식으로 등록할 수 있다.
위 태그는 body 종료 직전에 넣으면 좋다.
페이스북 Metadata
1
2
3
4
<meta property="og:url" content="https...">
<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:url" content="https...">
페이스북, 카카오톡, 라인 등에서 모두 참고하고 있는 태그
위 태그를 참고할 수 있는
공유 디버거가 있다.
https://developers.facebook.com/tools/devug/
트위터 Metadata
1
2
3
4
<meta name="twitter:card" content="https...">
<meta name="twitter:title" content="...">
<meta name="twitter:description" content="...">
<meta name="twitter:image" content="https...">
https://cards-dev.twitter.com/validator