검색엔진 최적화(SEO) 이유와 10가지 방법

검색 엔진 최적화(Search Engine Optimization, SEO)가 필요한 이유는 다음과 같다.

 

콘텐츠, 웹 페이지를 제작할 때, 궁극적인 목적은 사용자에게 양질의 정보를 올바르게 전달하는 것이다. 잘 만들어진 콘텐츠와 잘 작성된 문서라도 사용자가 읽지 않는다면 그것은 콘텐츠, 문서로써 의미가 없다.

 

검색 엔진 최적화에 영향을 주는 요인들은 10가지 있다.

 

1. 페이지 타이틀(Title)
2. 올바른 meta 태그 사용
3. 캐노니컬(Canonical) 태그 사용
4. 모바일 친화적인 웹
5. 시맨틱 마크업, 의미있는 문서 작성과 링크(a), 이미지(img) 등 올바른 태그와 그에 맞는 속성 사용
6. SSL(Https) 사용 여부
7. 핵심적인 웹 지표(LCP, FID, CLS)와 로딩 속도
8. 백링크
9. 연관성있는 양질의 콘텐츠를 주기적으로 제공
10. 노출 대비 클릭률

 

한 줄로 요약하자면, 검색엔진이 이해하기 쉽고, 사용자가 사용하기에 편리한 문서가 검색엔진 최적화도 잘 이루어진 문서라고 말할 수 있다.

 

검색엔진 최적화 방법

 

1. 페이지 타이틀 <title>

"title 태그"는 HTML 문서 내 HEAD 태그의 자식 요소 중 하나이다. 그리고 브라우저 탭에 표시되며 본문 콘텐츠 내에서는 표시되지 않는다.

또한, "title 태그"는 텍스트로만 구성되어야 하며, 자바스크립트를 통해 동적으로 생성된 타이틀도 크롤링된다. 단, 동적으로 생성 시 로딩되는 속도에 유의해야 한다.

그리고 화면낭독기인 스크린리더 사용할 때, 해당 웹 페이지에 대한 정보를 제공하기 때문에 간결하게 작성되어야 하고, 각 세부 페이지마다 적절한 타이틀이 필요하다.

 

"title" 작성법은 다음과 같다.

본문 콘텐츠를 가장 잘 표현하는 키워드를 고르고, 각 페이지마다 구체적이고 적절한 단어를 사용하여 타이틀을 정해야 한다. 그리고 반복적인 내용을 피해야 하며, 화면낭독기 사용자를 고려하고, 브라우저 탭에 표시되는 부분임을 감안하여 간결하게 작성해야 한다.

그리고, 구분자로 하이픈(-), 파이프(|), 콜론(:) 등이 사용될 수 있다. (예. 공지게시판 - Velog, 공지게시판 | Velog, 공지게시판 : Velog)

 

2. 올바른 meta 태그 사용

"meta 태그"는 HTML 문서 내 HEAD 태그에 포함된다. 검색엔진을 위해 들어가는 태그로 트위터, 페이스북 등 SNS에 들어가는 meta 태그가 있다. 그리고 name, content 등의 속성을 통해 메타데이터를 제공한다.

 

"meta 태그"의 종류는 다음과 같다.

 

charset

"charset"의 표준은 UTF-8이며, UTF-8로 설정 시 한글을 포함해 모든 언어를 해당 웹 페이지에 표현할 수 있다.

<meta charset="UTF-8">

 

name="viewport"

브라우저에 표시되는 화면에 대한 기준을 정해주는 메타 태그이다. 해당 웹 페이지가 모바일 디바이스에서도 볼 수 있도록 되어있는지에 대한 정보를 기입한다. 모바일 친화적인 웹이 높은 점수를 받는다. 예를 들면, 반응형 웹처럼 말이다.

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"><!--
width=device-width : 뷰포트=화면크기로 설정
user-scalable=no : 사용자가 화면 사이즈를 조정가능하도록 하는가=no
initial-scale=1.0 : 줌 비율=1
-->

 

name="robots"

해당 페이지를 검색 결과에 표시할 지(index) 표시하지 않을 지(noindex), 그리고 페이지 안에 있는 링크를 따라 이동하게 할 것인지(follow) 아닌지(nofollow)를 지정할 수 있다.

"nofollow"의 경우, '크롤러가 페이지에 있는 외부 사이트 링크를 따라 이동하지 않도록 한다'는 것이 왜 필요한 지 잘 와닿지 않을 수 있지만, 댓글 영역에 주로 사용하게 된다. 방문자들이 입력한 링크로 크롤러가 멋대로 이동해서 연결된 페이지가 해당 페이지의 평가에 영향을 주지 못하도록 하는 것이다. 이는 복수 지정이 가능하며 콤마(,)로 구분한다.

이 외에도 유효한 지시어로도 "all"은 기본값이며, 색인 생성이나 게재에 대한 제한이 없고, 표시해도 어떠한 효과가 없다. "none"은 noindex, nofollow와 같다. 

<meta name="robots" content="all">
<meta name="robots" content="index,follow"> <!-- 기본값이며, all과 같다고 볼 수 있다 -->
<meta name="robots" content="noindex,follow">
<meta name="robots" content="index,nofollow">
<meta name="robots" content="noindex,nofollow"> <!-- none과 같다 -->
...

 

name="description"

검색 엔진의 검색 결과가 화면에 노출되는 텍스트이다. 이는 사이트에 대한 설명을 작성한다.

<meta name="description" content="검색엔진 최적화(SEO) 방법 8가지 방법를 소개">

 

name="author"

문서의 저작자를 표기한다.

<meta name="author" content="김모모(Kim momo)">

 

name="keywords"

구글을 비롯해 많은 검색 엔진들이 참고하지 않는 meta 태그이다. 따라서 작성하지 않아도 무방하다. 콘텐츠를 대표하는 키워드를 10개 정도로 정의해야 하는 일반적인 기준이 있음에도 많은 제작자 및 마케터들이 해당 속성을 지나치게 많은 키워드를 작성하는 경우가 많았고, 이는 오히려 검색 결과에 혼동을 준다고 판단되어 keywords meta 태그는 더 이상 사용하지 않는다.

<meta name="keywords" content="검색엔진최적화,SEO,검색엔진,최적화,웹성능최적화,Search Engine Optimization">

 

오픈 그래프(Open Graph) & og 태그 종류

"og 태그"는 웹 페이지를 공유할 때 보여주는 미리보기이다.

크롤러가 해당 웹 페이지를 먼저 방문한 후, 메타데이터를 크롤링해서 미리보기를 만들어준다. 이는 페이스북에서 만들어졌고, 트위터 등 각종 SNS, 네이버, 카카오톡 등 다양한 사이트에서 사용되고 있다.

 

그리고 페이스북, 네이버, 카카오톡에 링크 공유 시 보여질 미리보기를 설정할 수 있다.

<!-- 웹 페이지 URL -->
<meta property="og:url" content="www.youtube.com">

<!-- 콘텐츠 제목 -->
<meta property="og:title" content="YouTube">

<!-- 콘텐츠 설명 -->
<meta property="og:description" content="여기를 눌러 링크를 확인하세요.">

<!-- 웹페이지,콘텐츠 타입 (ex: blog,article,website..) -->
<meta property="og:type" content="video">

<!-- 미리보기 썸네일 이미지 -->
<meta property="og:image" content="../images/thumb.png">

<!-- 사이트 이름 -->
<meta property="og:site_name" content="YouTube">

그러나, 트위터는 다르게 사용하여야 한다.

<!-- 트위터 카드 타입 -->
<meta name="twitter:card" content="summary">

<!-- 콘텐츠 제목 -->
<meta name="twitter:title" content="SEO 최적화 방법">

<!-- 콘텐츠 설명 -->
<meta name="twitter:description" content="퍼블리셔의 SEO 최적화 방법 소개">

<!-- 미리보기 썸네일 이미지 -->
<meta name="twitter:image" content="../images/thumb.png">

트위터 Card 종류에는 "summary", "summary_large_image", "app", "player"가 있다. Card 설정에 따라 보여질 미리보기의 레이아웃을 변경할 수 있다.

 

그 외

생성 날짜의 "data", 저작권의 "copyright", 문서의 주제의 "subject", 위치의 "location", 발행하는 사람 또는 회사의 "publisher", 새로고침의 "refresh" 등 굉장히 많이 있다.

주로 사용되는 것은 상단의 작성한 태그들이며, 이 외에 필요한 경우 다른 메타 태그들을 추가하는 식으로 생각하면 된다.

 

3. 캐노니컬 태그(Canonical Tag)

이는 한 화면 내에 여러 개의 URL이 중복되어 사용될 때, 검색 엔진에 대표 URL을 알려주는 태그이다. 예를 들면, Website라는 사이트의 main이라는 페이지 내에서 아래의 URL들이 사용될 경우, HTML의 HEAD 내에 캐노니컬 태그로 대표되는 URL을 지정해주는 것이다.

https://www.website.com/main?id=1
https://www.website.com/main?id=as200-21d5-1e401ad123
...

<link rel="canonical" href="https://www.website.com/main">

여기서 주의해야 할 점은 대표 URL에 "noindex" 로봇 메타 태그가 포함되어 있다면, 캐노니컬 태그를 설정해도 검색 엔진이 크롤링할 수 없기 때문에 주의해야 한다. 자세한 사항은 구글 검색 센터에서 확인할 수 있다.

 

4. 모바일 친화적인 웹

스마트폰이 일상 생활의 필수가 되면서 모바일의 중요성이 강조되고 있다. 모바일 디바이스를 사용해 간편하게 웹서핑하는 사용자가 많아졌고, 모바일에서의 사용성과 높은 수준의 사용자 경험은 매우 중요하다.

만약, 전용 앱이 없다면 반응형 웹은 꼭 있어야 한다. 또한, <meta name="viewport"> 태그를 통해 검색 엔진에 해당 사이트가 모바일 친화적이라는 것을 알려주는 것이 최적화 점수를 많이 받을 수 있는 방법이다. 이 방법을 더 자세하게 알고 싶다면 아래의 블로그에서 확인할 수 있다.

구글이 알려주는 SEO 보다 더 중요한 모바일 검색엔진최적화

 

그리고, 퍼블리셔의 입장에서 반응형 웹을 구축할 때, 모바일에서 태블릿 그리고 PC(Web) 순서가 가장 좋다. 반응형 웹은 특성상 모바일 디자인이 대체적으로 단조롭다. 특히, CSS 스타일을 적용할 때는 PC에서 모든 화려한 스타일을 적용하고 나서 모바일 기기로 옮겨가면서 스타일을 초기화하는 것보다 모바일부터 PC로 나아가는 것이 작업의 효율면에서도 웹의 성능면에서도 좋다. 미미한 차이라고 볼 수 있겠지만, 미미한 것들이 모여 성능 향상에 기여한다.

 

5. 의미있는 문서 작성과 태그의 올바른 사용

시맨틱태그의 규칙을 알고, 올바르게 작성해야 한다. 올바르게 작성된 문서가 접근성과 성능 향상에 기여한다. 특히, Heading 태그의 적절한 사용과 <img> 태그, <a> 태그의 정확한 사용은 접근성 측면에서도 중요하다. "title"과 "alt" 속성을 사용해서 어떠한 링크인지, 어떻게 이동하는지(예. 새 창), 어떤 이미지인지 설명이 되어있어야 한다. 설명 부족 시, 블라인드(스크린아웃) 텍스트를 활용한 "ir 기법"도 적절히 사용하는 것이 필요하다. 그러나, 지나친 반복과 장황함은 피해야 한다. 보고 들었을 때, CSS가 있고 없을 때 전달되는 정보의 차이가 없어야 좋은 웹 문서이자 콘텐츠이다.

 

6. SSL(Https) 사용 여부

"Https"는 HTTP Secure의 약자로 HTTP Protocol의 암호화된 버전이다. Http에 SSL을 적용해 데이터 전송 기능의 보안을 강화한 전송 기능(Hypertext Transfer Protocol Over Secure Socket Layer)으로 각종 바이러스 침투에 대비하는 기술들이 추가되었고, 구글에서 사용을 권장하고 있다.

Google에서는 가능하면 모든 웹사이트에서 https://를 사용하기를 권장하고 있습니다.
호스트 이름은 웹사이트가 호스팅되는 곳이며 일반적으로 이메일에 사용하는 것과 동일한 도메인 이름을 사용합니다.
Google은 www 버전과 www가 아닌 버전(예: www.example.com 또는 example.com만)을 구분합니다.
웹사이트를 Search Console에 추가할 때 http:// 버전과 https:// 버전을 모두 추가하고
www 버전과 www가 아닌 버전도 추가하는 것이 좋습니다.

[출처] https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=ko

 

7. 핵심적인 웹 지표(LCP, FID, CLS)와 로딩 속도

핵심적인 웹 지표(Core Web Vitals)는 실제 사용 데이터에 따른 페이지의 성능을 보여주는 지표이다. LCP, FID, CLS의 세가지 항목으로 구성되어 있으며, 페이지 성능이 중요한 이유는 사용자의 이탈률 때문이다. 당연히, 로드 시간이 길수록 이탈률이 높아진다.

페이지 로드 시간이 1초에서 3초로 늘어나면 이탈률은 32% 증가합니다.
페이지 로드 시간이 1초에서 6초로 늘어나면 이탈률은 106% 증가합니다.

[출처] https://support.google.com/webmasters/answer/9205520?hl=ko#about_data

LCP

사용자가 URL을 요청한 시점부터 페이지 내에서 시각적으로 가장 큰 콘텐츠를 그리기까지의 걸리는 시간이다. 사용자는 콘텐츠가 보여지면서 URL이 실제로 로드되고 있음을 확인하게 되기 때문에 빠르게 그려지는 것이 중요하다.

 

"좋음"은 2.5초 이하, "개선필요"는 4초 이하, "느림"은 4초 초과

 

FID

웹 페이지가 사용자의 동작(링크 클릭, 버튼 탭 등)에 반응할 때까지 걸리는 시간이다.

 

"좋음"은 100밀리초 이하, "개선필요"는 300밀리초 이하, "느림"은 300밀리초 초과

 

CLS

누적 레이아웃 변경을 말한다. 페이지가 중단되면서 로딩되면 사용자는 원하는 곳에 빠르게 접근할 수 없게 된다.

 

"좋음"은 0.1 이하, "개선필요"는 0.25 이하, "느림"은 0.25 초과

 

자세한 내용은 아래의 페이지에서 확인할 수 있다.

코어 웹 바이탈 보고서 - Search Console 고객센터

 

8. 백링크

웹 페이지 내에 다른 사이트로 연결해주는 링크이다. 검색 엔진이 인식 가능한 백링크는 <a> 태그와 같은 링크 태그로 구성된 '클릭 및 이동'이 가능한 하이퍼링크이다.

"www.google.com"이 아닌 "www.google.com"처럼 링크가 되어 있어야 한다.

당연히, 많다고 무조건 좋은 것은 아니다. 검색 엔진의 평가에 포함되어도 괜찮은 백링크로 구성되어야 한다.

 

9. 양질의 콘텐츠

양질의 콘텐츠를 주기적으로 제공하는 것은 중요하다. 양질의 콘텐츠는 높은 성능과 접근성을 가진 것으로 좋은 사용자 경험을 제공하여 웹 페이지의 클릭률과 체류 시간을 높일 수 있고, 이탈률은 낮출 수 있다.

이러한 콘텐츠는 자연스럽게 사용자가 늘어나고, 사용자가 늘어나는 것은 검색 엔진 최적화 점수가 높아지는 것에 기여한다.

 

10. 노출 대비 클릭률

검색 결과 페이지(Search Engine Results Pages, SERP)의 노출 대비 클릭률은 검색 엔진 최적화에 영향을 미친다.

클릭률에 가장 큰 영향을 미치는 요소는 검색 리스트에서 보여지는 순위이다. 1 ~ 5번 째 검색 결과에서 65% 이상의 클릭률이 발생하고, 1 페이지 내에서 70% 이상의 클릭률이 발생한다.

순위를 높이기 위해서는 앞서 나열한 모든 요소들, 양질의 콘텐츠, 마케팅 요소 등 많은 요인들이 조화를 이루어져 있어야 한다.

 

클릭률(Click Through Rate, SEO CTR) = 클릭 수(Click) / 검색량(Search Volume)

 

---

참조 블로그

검색엔진 최적화(SEO) - 구글중심