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

hsecode·2022년 2월 18일

OG html meta tag seo 검색엔진최적화 마케팅 성능최적화 웹성능 최적화

130

최적화

목록 보기

1/7

🔎 검색엔진 최적화(SEO)가 필요한 이유

🤔 검색 엔진 최적화(Search Engine Optimization, SEO)가 필요한 이유는 무엇일까? 꼭 해야할까?

마케팅, 홍보 측면 외에도 궁극적인 목적 을 위해서 검색엔진 최적화는 꼭 필요하다.

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

그러하다.. 검색엔진 최적화는 꼭 필요한 과정이다. 콘텐츠는 소비되어야만 비로소 완성된다.😎
~~힘들게 제작했는데 누군가 봐주면 일단 기분이 좋잖아요?~~

또 접근성, 검색엔진 최적화(SEO), 성능 최적화는 전부 다른 것이지만 긴밀한 관계에 있다.
(어느 한 부분이 빈약해지면 다른부분도 같이 빈약해지는 매직 . . . 🪄)

포털의 검색 알고리즘을 정확히 알기는 어렵지만
검색엔진 최적화 과정을 거친다면 내가 작업한 웹페이지나 콘텐츠를 검색리스트 상위에 노출시킬 수 있다!

그렇다면 마크업개발자로써 어떤 요소들을 챙겨서 검색엔진 최적화에 기여할 수 있을까?
SEO에 대해 그동안 쌓은 정보를 구글을 중심으로 기록해본다. 퍼블리셔의 SEO 방법 10가지 !

🔎 검색엔진 최적화(SEO)에 영향을 주는 요인

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

등등..여러가지 방법이 있다.

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

🔎 검색엔진 최적화(SEO) 방법

📌 1. 페이지 타이틀 < title >

title 태그는 html 문서 내 head 태그의 자식요소 중 하나이다.
브라우저 탭에 표시되며 본문 콘텐츠 내에서는 표시되지 않는다.
title 태그는 텍스트로만 구성되어야하고, JS를 통해 동적으로 생성된 타이틀도 크롤링된다. 단, 동적으로 생성 시 로딩되는 속도에 유의해야한다.
화면낭독기(스크린리더) 사용시 해당 웹페이지에 대한 정보를 제공하므로 간결하게 작성되어야하고, 각 세부 페이지마다 적절한 타이틀이 필요하다.

📎 title 작성법

본문 콘텐츠를 가장 잘 표현하는 키워드를 고른다.
각 페이지마다 구체적이고 적절한 단어를 사용하여 타이틀을 정한다.
반복적인 내용을 피한다.
화면낭독기 사용자를 고려하고, 브라우저 탭에 표시되는 부분임을 감안하여 간결하게 작성한다.
구분자로 하이픈(-), 파이프(|), 콜론(:)이 사용될 수 있다.
ex) 공지게시판 - 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) 방법 10가지 소개">

✔️ name="author"

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

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

✔️ name="keywords"

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

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

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

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

✔️ 페이스북(facebook),네이버,카카오톡 등

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

<!-- 웹 페이지 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">

✔️ 트위터(twitter)

트위터는 전용(?) 태그가 따로 있다.

<!-- 트위터 카드 타입 -->
<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 설정에 따라 보여질 미리보기의 레이아웃을 변경할 수 있다.

📎 etc

그 외에도 date:생성 날짜, copyright:저작권, subject:문서의 주제, location:위치, publisher:발행하는 사람 또는 회사,refresh:새로고침 등 meta태그 리스트만 따로 포스팅해야할 정도로 아주 많다.
주로 사용되는 것은 상단에 작성한 태그들이며 그 외에 필요할 경우 다른 메타 태그들을 추가하는 식으로 생각하면 될 듯하다.

📌 3. 캐노니컬 태그(canonical tag)

캐노니컬 태그(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. 모바일 친화적인 웹

스마트폰이 보급되고 일상생활의 필수 아이템이 되면서 모바일의 중요성이 강조되고있다.
데스크탑보다 모바일 디바이스를 사용해 간편하게 웹서핑하는 사용자가 많아진 것은 누구도 부정하기 어렵다.
모바일에서의 사용성과 높은 수준의 사용자경험은 아주아주 중요하다 !

유행이 지났다고는 하나 전용 앱이 없다면 반응형 웹은 꼭 있는것이 좋다..
(스마트폰에서 pc 화면을 보는건 너무 불편하다..입장바꿔 생각해보면 당연한 일)
또한 meta name="viewport" 태그를 통해 검색엔진에 해당 사이트가 모바일 친화적이라는 것을 알려주는 것이 최적화 점수를 많이 받을 수 있는 방법.
자세한 내용은 이곳에 잘 정리가 되어있어 링크를 첨부한다.

추가적으로 퍼블리셔의 입장에서 반응형 웹에 대한 의견을 짧게 작성하자면
반응형 웹을 구축할 때에는 모바일 -> 태블릿 -> PC(Web) 순서가 좋다.
반응형 웹은 특성상 모바일 디자인이 대체적으로 단조롭다. css 스타일을 적용할 때 PC에서 모든 화려한 스타일을 적용후 모바일 기기로 옮겨가면서 스타일을 초기화하는 것 보다 모바일부터 PC로 펼쳐 나가는 것이 작업의 효율면에서도 웹의 성능면에서도 좋기 때문이다.
차이가 미미하다고하면 그럴수도 있겠으나..미미한 효율도 효율이다. 원래 미미한 것들이 모여서 성능향상에 기여한다.

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

시맨틱태그의 규칙을 알고, 올바르게 작성해야한다. 올바르게 작성된 문서가 접근성과 성능향상에 기여한다.
특히 heading 태그(h1,h2,h3 ...)의 적절한 사용과 img태그 a태그의 정확한 사용은 접근성 측면에서도 중요하다.
title과 alt 속성을 사용해서 어떠한 링크인지, 어떻게 이동하는지(ex.새창열림), 어떤 이미지인지 설명되어야한다. 설명이 부족할 시 블라인드(스크린아웃) 텍스트를 활용한 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 초과

자세한 사항은 구글 코어 웹 바이탈 보고서에서 추가로 확인할 수 있다.
LCP,FID,CLS 및 웹 성능 최적화의 구체적인 방법은 따로 포스팅 예정.

📌 8~10. 백링크, 양질의 콘텐츠, 노출 대비 클릭률

이 항목들은 일맥상통하는 요소라고 생각되어 묶어서 작성한다.

백링크 : 웹페이지 내에서 다른 사이트로 연결해주는 링크이다. 검색엔진이 인식 가능한 백링크는 a태그와 같은 링크 태그로 구성된 '클릭 및 이동'이 가능한 하이퍼링크이다.
www.google.com ❌
www.google.com ✅
당연하게도 많다고 무조건 좋은 것은 아니다. 검색엔진의 평가에 포함되어도 괜찮을만한 백링크로 구성되어야한다.
양질의 콘텐츠 : 양질의 콘텐츠를 주기적인 제공하는 것은 중요하다. 양질의 콘텐츠란 무엇일까.. 높은 성능과 접근성으로 좋은 사용자 경험을 제공하여 웹 페이지의 클릭률과 체류시간을 높히고, 이탈률은 낮춘 콘텐츠가 아닐까. 이러한 콘텐츠는 자연스럽게 사용자가 많아지고, 사용자가 많아지는 것은 검색엔진 최적화 점수가 높아지는 것에 기여할 것이다.
클릭률 : 검색 결과 페이지(Search Engine Results Pages,SERP) 노출 대비 클릭률은 검색엔진최적화에 영향을 미친다.
클릭률에 가장 큰 영향을 미치는 요소는 아무래도 검색리스트에서 보여지는 순위이다. 1~5번째 검색결과에서 65% 이상의 클릭률이 발생하고, 1페이지 내에서 70% 이상의 클릭률이 발생한다고 한다.
순위를 높히기 위해서는 앞서 나열한 모든 요소들, 양질의 콘텐츠, 마케팅 요소 등 많은 요인들이 조화를 이루어야 한다.
SEO CTR(Click Through Rate) = 클릭수(Click) / 검색량(Search Volume)

👏🏻 마무리

🐱 : 검색엔진 최적화(SEO)에 대해서 막연하게 알던 부분까지 깊이있게 찾아볼 수 있어서 유익했다. 접근성을 맞추기 위해서 기획, 디자인, 마크업, 개발 등 모든 파트들의 협력이 필요하듯이 검색엔진 최적화 또한 마찬가지라고 느꼈다.

서두에서도 언급했지만 웹표준, 웹접근성, 검색엔진 최적화, 웹 성능 최적화는 유기적으로 연결되어있다. 잘 지켜진 표준과 접근성이 성능 최적화에 기여하고, 성능 최적화는 검색엔진 최적화로 이어진다. 기본적인것은 언제나 중요하다. 이 요소들이 높은 수준으로 유지되려면 마크업개발자만의 노력으로는 한계가 있을 것이다.

마크업 개발자 입장에서 작성한 문서라 비교적 간략히 작성했지만 심도있게 접근하기 위해서는 마케팅 파트의 역할 또한 크겠다. 역시 좋은 웹을 위해서는 놓치는 부분이 없도록 모든 파트들이 노력해야하고, 중요하지 않은 파트는 없음을 또한번 확신하게 되었다.