SEO 가이드(6) - 온페이지 SEO, 메타 태그와 알트 태그, 그리고 내부 링크까지
검색 엔진이 콘텐츠를 쉽게 크롤링하고 색인할 수 있도록 웹사이트의 기술적인 측면을 돕는 최적화 작업인 테크니컬 SEO, 웹사이트 외부에서 수행하는 최적화 작업을 의미하는 오프페이지 SEO와 함께, 페이지가 검색 엔진 결과 페이지 (SERP)에서 잘 수행되도록 도와주는 SEO 작업의 주요한 또 다른 측면인 온페이지 SEO에 대해 알아보겠습니다.(image source: Foundation Marketing)
온페이지 SEO (On-page SEO, or on-site SEO)란, 검색 엔진 결과 페이지(SERP)에서 순위를 개선하기 위해 자체 웹 페이지 내에서 수행할 수 있는 모든 작업 을 말합니다. 타이틀 태그, 메타 디스크립션, URL, 제목, 소제목 및 프로세스 앞 단의 키워드 적합 여부와 콘텐츠 품질을 다 함께 고려하여 최적화 여부를 점검하는 단계입니다.
SEO 작업 프로세스와 함께 그 의미를 다시 살펴보겠습니다:
테크니컬 (Technical) SEO. Optimize for search engine efficiency.
키워드 리서치. Identify optimal search terms.
콘텐츠 SEO.Tailor content for searchers.
온페이지 (On-page) SEO. Clarify content presentation.
오프페이지 (Off-page) SEO. Build trust and authority externally.
키워드 리서치를 실시하여 콘텐츠가 타깃하는 메인 키워드 및 서브 키워드들을 추출하고 키워드별 경쟁강도를 파악하여 콘텐츠 내에 적절하게 배치하는 것, 웹사이트가 지닌 콘텐츠들간의 인터널 링크를 빌딩하는 것, 사용자들에게 품질이 낮은 이미지로 읽히지 않으면서 페이지 로딩의 부담을 줄이는 이미지 최적화 작업, 페이지 제목을 정의하는 <title> 태그, 검색 결과 페이지에서 사용들에게 간략한 콘텐츠 설명을 제공하는 <meta name="description" content="..."> 메타 설명 태그, <h1><h2><h3>... 순으로 콘텐츠 위계를 설정하여 웹 크롤러가 구조화가 잘 이루어진 콘텐츠로 인식하게 하는 헤딩 태그, 이미지 alt 태그 등을 설정하는 등의 다양한 작업들이 온페이지 SEO에 포함됩니다.
그래서, 온페이지 SEO란?
온페이지 SEO (On-page SEO, or on-site SEO)란, 이전 실시 단계들인 키워드 리서치 및 콘텐츠 SEO 작업을 포함하여 전체적으로 페이지 내에서의 검색 엔진 최적화를 점검하는 포괄적인 단계 로 이해할 수 있겠습니다.
온페이지 SEO 를 위해서는 어떤 작업을 해야할까요? 아래는 ahrefs가 제시하는 온페이지 최적화 작업을 위한 체크리스트입니다:
ahrefs는 온페이지 SEO 작업을 콘텐츠, 메타태그, 링크, 이미지, 추가 작업의 5가지 범주로 나누고 있는데, 조금 더 쉽게 이해하기 위해 페이지의 콘텐츠 내적인 측면의 작업 (within content)과 콘텐츠 외적인 요소들에 대한 작업 (beyond content)으로 구조를 나눠 살펴보도록 하겠습니다.
콘텐츠 내적 요소 (Within content)
우리는 콘텐츠 SEO를 소개하는 가이드 문서에서 검색 엔진은 사용자의 질문에 답을 제시하기 위해 존재하며, 사용자가 궁금해하고 입력하는 쿼리 (query)에서부터 검색결과를 제공하는 과정을 시작한다는 것을 이해했습니다. 또한 콘텐츠 품질 평가에 있어서 구글은 키워드와 연관성을 가지며 사용자들의 눈길을 끄는 유용하고 신뢰할 수 있는 사람 중심의 좋은 품질의 콘텐츠에 대한 자체적인 기준(E-E-A-T)를 가지고 평가한다는 것 또한 학습했습니다.
온페이지 SEO 단계에서는 앞선 단계에서 진행한 키워드 리서치를 통해 도출된 타깃 키워드를 콘텐츠에 실제적으로 반영하고, 콘텐츠의 품질을 염두에 두고 콘텐츠를 작성해야 합니다.
키워드를 얼마나 자주 반복하는 것이 좋은가요?
SEO 관련 자료나 서비스를 살펴보신 분이라면 "중요한 키워드는 콘텐츠 내에서 X번 반복하세요." 와 같은 전략성 문구를 꽤 자주 발견하셨을 겁니다. 혹은 콘텐츠 내에서 특정 키워드가 차지하는 비중을 일컫는 키워드 밀도 (keyword density)를 체크하는 서비스들이 다수 존재하는 것을 알고 계실 겁니다.
하지만, 키워드 반복 횟수는 SEO에 중요하지 않습니다.
“I would love it if people could stop obsessing about keyword density. … There’s not a hard and fast rule.” – Matt Cutts
“Keyword density, in general, is something I wouldn’t focus on. Make sure your content is written in a natural way.” – John Mueller
구조적인 콘텐츠 (H 태그)
구글은 콘텐츠의 구조에 대해서도 중요성을 언급하고 있습니다. 콘텐츠 내에 위계가 있어 질서정연하게 잘 정리되어 있기를 요구합니다. 그렇다면 어떻게 크롤러가 콘텐츠의 구조화가 잘 조직되어 있는 지를 판단할 수 있을까요?
바로 아래와 같은 "<h>, 헤더 태그"를 이용하는 것입니다:
<h1>Page Title</h1>구글은 HTML and semantic tagging 문서에서 HTML 요소들을 목적에 맞게 사용하기를 명시했으며, <h> 태그는 HTML 요소들 중 하나로 콘텐츠 섹션들의 헤더(header)들을 구조적으로 배치하기 위한 태그입니다.
"Use HTML elements for the purposes that they were designed for."
John Mueller (Google's Webmaster Trends Analyst)가 언급한 H태그의 역할 또한 콘텍스트에 따른 섹션 분리 (semantically strutured)로, 크롤러 뿐만 아니라 유저들의 읽기 경험을 위해서도 유용하게 이용됨을 얘기하고 있습니다:
구글은 크롤링 작업을 위해 막대한 수의 컴퓨터를 사용하여 웹에 있는 페이지 수십억 개를 크롤링 해야하므로 모든 콘텐츠의 구조와 내용들을 일일이 살펴보는 것이 제한됩니다. 따라서 아래와 같이 HTML 속에 헤더 태그를 이용하여 질서정연하게 콘텐츠 데이터를 사전에 정리해둠으로써 크롤러가 정보를 획득하고 이해하는데에 도움을 줄 수 있게 되는 것입니다. (image source: ahrefs)
헤더 태그의 쓰임
<H> 태그를 어떻게 사용해야 하는지에 대해 알아봅시다.
주요 헤더 태그인 H1은 일반적으로 페이지의 제목에 사용되며, H2부터 H6까지의 하위 헤딩들도 존재합니다만 모두 사용할 필요는 없습니다.
<h1>Page Title</h1>예를 들어, 한국 관광 페이지를 살펴보겠습니다:
<h1>Korea Travel Guide</h1>
<h2>Korea by the Seasons</h2>
<h3>Korea in Winter</h3>
<h3>Korea in Spring</h3>주요 H1 헤딩에 페이지의 주요 주제가 소개되고, 각 추가 헤딩은 하위 주제들을 소개하는 데 사용됩니다. 아래는 H 태그들의 종류에 따른 쓰임에 대한 John Mueller의 기록입니다:
다음으로 H태그의 잘못된 사용과 베스트 프랙티스에 대해 알아봅시다.
헤더 태그의 베스트 프랙티스
구글은 Headings and titles 문서를 통해 권장하는 올바른 태그 사용 포맷을 적시하였습니다:
구글은 위의 권장 사용 포맷에 더해 예시를 통해 H태그의 잘못된 사용과 베스트 프랙티스들에 대한 소개를 덧붙였습니다. 어떤 내용들이 있는지 몇 가지 간단하게 살펴봅시다:
Ensure that each page in your project includes a unique level-1 heading. In some publishing systems, a level-1 heading might be generated automatically based on a page title that you supply.
Don't skip levels of the heading hierarchy. For example, put an
<h3>tag only under an<h2>tag.Don't use empty headings or headings with no associated content.
인블로그 팀은 자체 CMS 에디터 내에서 H태그들의 자동설정을 지원하여 콘텐츠의 구조적인 위계지정 기능을 제공합니다. 또한 블로그 콘텐츠의 본문뿐만 아니라 다른 콘텐츠로 이어지는 More Articles 섹션에서도 질서정연한 위계를 지정해두었습니다:
콘텐츠 외적 요소 (Beyond content)
위에서 살펴본 온페이지 SEO를 구성하는 콘텐츠의 내용적인 측면 이외의 형식적이고 기술적인 요소들을 몇 가지 살펴보도록 합니다.
타이틀 태그 & 메타 디스크립션
타이틀 태그는 웹 페이지의 제목을 지정하는 HTML 요소이며 설명적이어야 합니다:
<head>
<title>Example Title</title>
</head>메타 디스크립션은 타이틀 태그와 함께 해당 페이지의 내용을 설명하는 HTML 요소입니다:
<head>
<meta name=”description” content=”Description of page here.”/>
</head>타이틀 태그와 메타 디스크립션 태그는 모두 <head> 태그 안에 삽입되어 검색 결과 페이지에서 아래와 같이 노출됩니다:
외부로 콘텐츠 공유 시에는 OG 이미지와 함께 메타 데이터에서 아래와 같이 표기됩니다:
타이틀 태그와 메타 디스크립션은 콘텐츠 외부에서 검색 유저들이 콘텐츠에 대한 전체적인 개요를 파악하는데에 도움을 주는 정보로, 제목과 디스크립션이 매력적일수록 웹사이트로 더 많은 방문자를 끌어들이고 결과적으로 검색 결과에서 높은 순위를 차지하게 도움을 주는 수단입니다.
구글은 검색 엔진을 위해서가 아니라 언제나 사용자들의 전체적인 검색 경험을 최우선으로 생각한다는 사실을 생각하면 위 논리가 너무도 자연스럽습니다.
인블로그 팀은 자체 CMS 에디터 내에서 제목과 디크스립션을 입력하면 자동으로 타이틀 태그와 메타 디스크립션으로 설정되도록 지원하고 있습니다:
👉 타이틀 태그 & 메타 태그 최적화 인블로그로 글 써보기
내부 & 외부 링크 구축
구글은 아래와 같이 Link best practices for Google문서를 통해 내부 및 외부 링크의 상세한 베스트 프랙티스와 기대할 수 있는 SEO 효과에 대해 지면을 할애할만큼 링크에 대한 중요도를 높게 평가하고 있음을 알 수 있습니다.
내부 링크 (Internal Link) 구축
구글 검색엔진 작동방식에 대한 가이드문서#2 에서 크롤러는 기존의 웹페이지를 가져와서 그 웹페이지의 링크를 따라 새로운 URL을 찾고, 이 URL 경로를 따라 이동함으로써 새로운 콘텐츠를 찾게 된다고 이야기한 바 있습니다. (image source: link)
웹 사이트에 게시된 콘텐츠 서로를 연결하는 내부 링크를 빌딩함으로써 크롤러가 웹사이트 내에서 다양한 콘텐츠들로 이동할 수 있도록 돕고 웹사이트의 구조를 이해하는 데 도움을 줄 수 있습니다.
외부 링크 (External Link, Backlink) 구축
콘텐츠 SEO에 대한 가이드문서#5 내용 중 콘텐츠 품질 평가요소인 E-E-A-T를 설명하며 신뢰성 (Trustworthiness)을 구축하는데에 도움을 주는 한 요소로써 백링크를 설명했었습니다.
백링크(Backlink)는 웹페이지끼리 링크를 주고받는 것을 말합니다.
타 웹사이트에서 자사 페이지를 언급하면서 링크를 달면 우리는 해당 웹사이트로부터 백링크를 받게 됩니다. 반대로 자사 페이지에서 다른 웹 사이트의 페이지로 링크를 연결하면 타 웹사이트에 백링크를 제공하게 되는 것입니다.
👉 외부 링크(백링크) 빌딩에 대한 더 자세한 내용은 가이드문서#7: 오프페이지SEO에서 확인하세요.
이미지 최적화 및 alt 태그
이미지 최적화
이미지는 웹 페이지의 속도를 느리게 만드는 가장 큰 요인입니다. 구글은 검색 이용자들의 페이지 경험을 개선(사이트 속도 개선, 모바일 친화 목적의 반응형 구축 점검 등)하는데에 힘을 쓸 것을 명시적으로 요구합니다.
이미지로 인하여 페이지 로딩이 느려지면 너무 당연히도 유저들은 기다리지 못하고 이탈하여 페이지 리텐션에 안좋은 영향을 미칠 것이기 때문입니다. (source: web.dev)
아래는 구글이 이미지 퀄리티와 로딩 속도에 대해 언급하는 공식 문서자료입니다:
이미지 alt 태그
이미지 대체 태그 Alt (alternative) tag는 시각 장애인에게 스크린 리더를 통해 이미지가 무엇을 설명하고 묘사하는지에 대해 사용되는 속성(attribute)입니다.
SEO에 alt 태그가 중요한 이유는 검색엔진 로봇도 대체 텍스트를 크롤링하여 이미지를 이해하는데에 이용하기 때문입니다. 따라서 검색 엔진에게 더 나은 이미지 컨텍스트를 제공하려는 노력을 기울일 것이 요구됩니다.
구글은 공식 문서를 통해 이미지 alt 태그의 올바른 사용을 위한 가이드와 예시를 제공합니다:
구글의 권장 가이드라인 몇 가지를 소개하면:
이미지의 상황을 상세하고 설명적으로 짧게 묘사할 것
페이지 콘텐츠의 맥락에 맞게 작성할 것
image1.jpg,pic.gif,1.jpg와 같은 이미지 파일 이름은 사용하지 말 것.검색엔진을 유인하는 키워드를 반복해서 사용 (keyword stuffing)하지 말 것
로봇 뿐만 아니라 사람에게 이미지의 내용이 설명적이고 자연스럽게 읽혀야 한다는 점을 고려하여, alt 태그의 올바른 사용 예시와 그렇지 못한 예시들을 살펴봅시다. (source:ahrefs)
alt 태그는 이미지를 설명하여야 한다고 했습니다. 왼쪽의 이미지는 이미지를 전혀 설명하고 있지 않습니다.
다음 예시들도 살펴봅시다:
첫 번째 예시의 경우, 이미지의 상황이나 맥락을 설명하기보다는 유인성 키워드인 dog, pups, puppy, puppies를 반복하고 있습니다.
두 번째와 세 번째 예시의 경우, 이미지의 내용과 상황을 짧고 명료하게 전달합니다.
위에서 언급한 콘텐츠 내적인 요소들과 외적인 요소들이 온페이지 SEO의 전부는 아닙니다. 또한 위 요소들 중 어느 하나만 최적화가 잘 이루어졌다고 해서 검색 엔진에 최적화되었다고 말할 수도 없습니다. 단순히 하나의 요소가 최적화되었을 뿐입니다.