SEO
- Search Engine Optimization - 검색엔진 최적화
- 검색엔진 최적화는 검색 결과 순위를 높이는 작업을 의미
- 구글에서 검색을 하면 검색엔진은 인덱싱해둔 수많은 웹 페이지 중 가장 적합한 순서대로 결과를 노출한다.
- 검색엔진 관련 알고리즘들은 모두 비공개로 되어있다.
검색엔진 정보를 확인할수 있는 도구들
1. Google Lighthouse
웹 페이지의 품질을 측정하기위한 오픈소스 자동 도구
검색엔진 최적화가 어느 정도 되어있는지 점수로 확인 가능
2. Alexa Traffic Rank
현재 사이트의 검색엔진 최적화점수를 해외, 국내 랭킹으로 확인이 가능
SEO에 영향을 주는 요인들
- 검색 결과 페이지(SERP) 노출 대비 클릭률
- 백링크(backlink): 다른 웹 페이지로부터 인용(링크)되는 횟수
- 도메인 권력(Domain authority): 검색 결과 페이지 순위 예측 점수
- 페이지 타이틀
- 메타 디스크립션
- 로딩속도
- SSL(https) 사용 여부
- 콘텐츠의 양, 질, 개연성
- 사용자 경험: LCP(최대 콘텐츠 블럭 그리기), CLS(누적 배치 변경)
페이지 타이틀
- 검색엔진은
<title>내부에 들어가있는 키워드를 제일 중요하게 판단 - 브라우저 tab의 표시된다.
<head>태그의 자식요소로 오고 텍스트만 자식요소로 가능- 길이는 영문 기준 공란포함 60자를 넘기지 않는 것을 권장
- 공백만으로 구성할 수 없다.
- 시작 태그와 종료 태그 모두 생략 불가
<head>
<title>타이틀</title>
</head>페이지 타이틀의 중요성
- 페이지 타이틀을 어떻게 작성하냐에 따라 사용자 경험이 달라지게 된다.
- 현재 페이지의 구체적인 키워드를 작성하여 사용자 입장에서 현재 페이지에 대한 정보를 간략히 파악 가능
- 스크린리더기 사용자들은 웹 페이지 접속시 페이지 타이틀을 음성으로 전달 받는데 원하는 페이지에 정확하게 접속했는지 빠르게 판단이 가능해진다.
- 따라서 페이지 타이틀은 중요한 키워드만 간결하게 짓는것이 Point ✔
올바른 페이지 타이틀 작성방법
- 본문을 가장 잘 설명하는 키워드를 중심으로 간결하게 작성
- 페이지마다 구체적인 키워드를 사용하고 반복하는 키워드를 최소화
- 브라우저 tab에 노출되므로 구체적인 키워드를 앞으로 배치하여 작성
페이지 타이틀 - 구분자
- 하이픈'-' => 키워드 사이의 공간이 더 크기 떄문에 가독성이 좋다
Page title-Site name - 파이프'|', 콜론':' => 장평이 적기 때문에 공간을 더 효율적으로 사용 가능
Page title|Site name
Page title:Site name - 언더바'_' => 인접 키워드를 하나로 연결하기 떄문에 비추천 💩
Page title_Site name
a. Javascript로 동적으로 생성한 페이지 타이틀도 크롤링이 되나?
b. 예전에는 크롤링이 안되었지만 요즘은 검색엔진 발달로 크롤링이 가능해졌다.
Metadata - html, head
html lang
<html lang="ko">- lang 속성은 검색엔진이 특정 언어의 웹페이지를 검색할때 도움을 준다.
- 스크린리더기 사용자들이 어떤 음성 엔진을 선택해야 하는지 도움을 준다.
구글은 lang 속성을 신뢰하지 않는다고 하였지만 접근성 측면에서는 중요하니 알맞는 언어를 지정해서 선언하자.
여러 meta 속성들
charset
<meta charset="utf-8">- 한글뿐만 아니라 전 세계의 모든 국가의 언어를 웹페이지에 표시할 수 있다 (
utf-8이 표준)
description
<meta name="dscription" content="A description of the page">- 검색엔진의 검색결과 화면에 노출되는 Text (사이트에 대한 설명을 작성)
keywords 💩
<meta name="keywords" content="class, curiculum, free, ...">- 구글 검색엔진에서 어뷰징 악용사례때문에 전혀 참고하지 않음
viewport
<meta name="viewport" content="width=device-width, initial-scale=1">- 데스크탑과 다르게 모바일에서는 기본적으로
viewport가 화면 크기가 아니라 문서 전체 크기이다. - 따라서 따로 viewport 선언을 해주어야 모바일에서 알맞는 화면으로 볼 수 있다.
- 웹페이지가 모바일 디바이스에 최적화되어 있는지에 대한 정보를 검색 엔진에 제공
- 구글은 모바일 최적화 여부를 중요시하게 생각한다.
naver
naver 연관 채널 등록
- 등록한 url들을 연관 채널로 크롤링
- JSON-LD (JSON-LOW DATA)형식
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "My Site Name",
"url": "http://www.mysite.com",
// 연관 채널 url
"sameAs": [
"https://www.facebook.com/myfacebook",
"http://blog.nave.com/myblog",
"http://storefarm.naver.com/mystore"
]
}- Microdata 형식
<span itemscope="" itemtype="http://schema.org/Organization">
<link itemprop="url" href="http://www.mysite.com">
// 연관 채널 url
<a itemprop="sameAs" href="https://www.facebook.com/myacebook"></a>
<a itemprop="sameAs" href="http://blog.nave.com/myblog"></a>
<a itemprop="sameAs" href="http://storefarm.naver.com/mystore"></a>
</span>meta property라는 속성을 이용하여 아래 속성들을 제공함- 링크를 공유할 때 썸네일, 어떤 설명을 표시할지 작성 가능하다.
- facebook 뿐만아니라 line, kakao도 참고
<meta property="og:url" content="https://*.html">
<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:image" content="https://*.jpg">페이스북 공유 디버거
어떤 형식으로 노출되는지 미리 파악이 가능하다.
- twitter도 마찬가지로 독자적인 포맷으로
<meta>작성
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="...">
<meta name="twitter:cdescription" content="...">
<meta name="twitter:image" content="https://*.jpg">
Front-End 😲