"SEO (Search Engine Optimization)는 고객한테 보이는 실질적인 첫인상이다."
SEO의 중요성을 말하기 전에 내가 꼭 짚고 가는 포인트이다. 많은 사람들이 웹사이트를 배포하면 웹사이트의 랜딩 페이지가 고객의 첫 방문이자 인상이라고 생각한다. 하지만, 정확한 시간, 물리적 순서상으로는 구글, 네이버의 검색 결과나 SNS에서 전달되는 URL이 웹사이트의 첫인상이다.
위와 같이 고객이 URL에 다이렉트로 들어가지 않는 이상 구글이나 네이버 같은 검색 플랫폼에서 검색한다. 이때, 웹사이트에 대한 설명이 부족하거나 없다면 스캠성(사기) 웹사이트로 간주되어 정상적인 유입을 기대할 수 없다.
마찬가지로, 위 사진처럼 카카오톡으로 받은 트립닷컴에 대한 설명과 썸네일이 정상적이면 괜찮다. 하지만 아래 사진처럼 받은 URL의 웹사이트 이미지가 없으면 스캠성(사기) 사이트로 간주되어 접속이 굉장히 꺼려진다.
또한, 네이버와 구글의 주요 목적은 사용자에게 가장 관련성 높고 유용한 검색 결과를 제공하는 것이다. 이를 위해 검색 엔진들은 지속적으로 알고리즘을 개선하고 있으며, SEO 가이드라인을 제공하고 있다. 그러므로 그들의 가이드를 따라 조금이라도 검색 결과 상위 목록을 차지하는 것이 웹서비스 런칭의 마지막 단계이기도 한다.
따라서, SEO 설정은 웹사이트의 첫인상을 결정짓는 고객의 유입의 결정적인 요소 중 하나이다.
SEO (Search Engine Optimization)
그럼 다시 SEO의 개념에 대해 다시 살펴보자.
SEO: 검색 사이트(ex. 네이버, 구글)을 이용하는 고객의 질문에 가장 가까운 답을 해주는 것으로 크게 크롤링, 인덱싱, 검색 결과 정리 및 노출 (SERP)로 구성되어 있다.
쉽게 SEO 단계를 풀이를 해보면,
<SEO 단계>
- 서점 알바가 새로 출간된 책을 수집하고 (크롤링),
- 새로운 책이 여행 도서인지, 패션 잡지인지, 수필인지 분류하고 (인덱싱),
- 괜찮은 책들은 월간 베스트, 이 달의 추천하는 책에 배치하는 것 (SERP)
여기서 서점 알바는 구글 검색 엔진으로 책은 웹사이트로 생각하면 된다.
- 크롤링 : 구글 봇이 웹사이트를 방문하여 페이지의 콘텐츠를 수집하고 새로운 링크를 발견하는 과정
- 인덱싱 : 수집된 페이지의 콘텐츠를 분석하고 이해하여 검색 가능한 형태로 데이터베이스에 저장하는 과정
- SERP : 사용자의 검색어와 관련성, 품질, 사용자 경험 등을 고려하여 가장 적절한 결과를 순서(순위)대로 보여주는 과정
결국, '구글과 네이버의 검색 엔진 == 인간'이라고 생각하고 검색 엔진 최적화를 잘하기 위해서는 '정도'를 따르는 것이 중요하다. 자세한 세팅 방법은 구글의 SEO 기본 가이드와 네이버의 웹마스터 도구에서 확인 가능하다.
하지만 위 문서들을 모두 읽는 것은 너무나 가혹하다. SEO가 중요한 것은 맞지만 고객의 유입을 눈에 띄게 이끌어내는 핵심 Key는 아니다. 따라서, 구글의 SEO 기본 가이드와 네이버의 웹마스터 도구를 꼼꼼하게 모두 챙기는 것도 중요하지만 이 글에서 정리한 9가지 필수적인 SEO 사항만 지키고 시간적 여유를 두고 고도화하는 것을 추천한다.
1. Title & Meta Description 작성
구글에 트립닷컴을 검색했을 때, 나오는 결과 값이다. 여기서 우리는 쉽게 명료한 Title과 Meta Description을 발견할 수 있다. Title은 웹페이지의 제목을 말하고 Meta Description은 Title 아래에 표시되는 짧은 텍스트이다.
Title : 트립닷컴 | 호텔, 액티비티, 항공권 예약 | Trip.com
Meta Description : 여행이 필요할 때, 트립닷컴! 전세계 항공권, 호텔, 기차표를 할인 가격으로 예약할 수 있는 Trip.com에서 스마트하게 여행을 계획하세요.
일반적으로 <head> 태그 안에 아래와 같이 작성을 한다.
<head>
<title>페이지 제목 여기에 입력 | 브랜드명</title>
<meta name="description" content="이곳에 페이지 내용에 대한 간단한 설명을 150-160자 내외로 작성합니다.">
<!-- 기타 head 요소들... -->
</head>
실제로 해당 웹사이트에서 확인하고 싶으면 F12를 누르고 <head> 태그 안에서 아래와 같은 형식으로 확인할 수 있다.
Title은 60자 이내, Meta Description은 150~160자 이내로 작성하는 것이 좋다. 핵심 키워드는 자연스럽게 포함시키는 것이 좋으며 각 페이지마다 고유한 Title과 Meta Description을 작성하는 것을 추천한다. 잘 작성된 제목과 설명문은 구글의 품질 지수에도 도움을 준다.
2. Open Graph 및 구조화된 데이터 설정
Open Graph는 SNS에서 웹사이트의 링크를 주고받을 때, 미리 보기처럼 출력되는 이미지, 텍스트 등을 말한다.
즉, 웹사이트에 들어가기 전, 웹사이트의 대표 이미지와 짧은 웹사이트의 설명 정도를 확인할 수 있다. 마찬가지로 Open Graph를 확인하기 위해서는 해당 웹사이트에서 F12를 눌러 개발자 모드를 킨 다음 <head> 태그에서 확인할 수 있다. 아래는 29cm의 OG 태그들이다.
<meta property="og:title" content="29CM 연중 최대 할인 주간, 이굿위크 - 감도 깊은 취향 셀렉트샵 29CM">
<meta property="og:description" content="최애 브랜드의 최대 할인을 지금 만나세요">
<meta property="og:type" content="website">
<meta property="og:image" content="https://img.29cm.co.kr/next-edition/2023/11/08/168afd1ad7a14319ad8011ff88a54a33_20231108043033.jpg">
<meta property="og:site_name" content="감도 깊은 취향 셀렉트샵 29CM">
29cm의 Open Graph 태그 예시이다.
- og:title : 29cm 블랙 프라이데이 페이지의 제목
- og:descriptioin : 해당 페이지에 대한 설명
- og:image : 미리보기 사진
- og:type : 해당 링크의 타입
- og:type : 웹사이트 이름
이처럼 Open Graph 세팅을 잘해놓아야 유가 마케팅을 했을 때, 소비자의 유입 및 결제 전환을 잘 이끌어낼 수 있다. 아래의 사진처럼 아무런 미리 보기 사진, 웹사이트의 설명이 나오지 않는다면, 당연히 소비자는 링크 접속을 꺼려 할 수밖에 없다. 즉, 인쇄비와 전단지 알바비를 내고 찢어진 전단지를 돌리는 것과 같다.
Open Graph의 중요성을 알지만 Open Graph가 요구하는 스펙을 놓쳐 불완성적인 Open Graph를 형성하는 경우가 꽤 많다.
위 사진은 Open Graph가 요구하는 이미지 크기를 맞추지 않아 사진이 잘린 상태로 미리 보기가 제공되고 있다. Open Graph에서 요구하는 이미지 크기는 1200px X 630px이다. 자세한 Open Graph 작성 방법은 링크에서 확인할 수 있다.
또한, Twitter에서 요구하는 Open Graph의 스펙이 별도로 있다. 글로벌 유저를 대상으로 하는 웹사이트는 Twitter 링크로 프로모션 이벤트 내용이나 웹사이트 소개가 전달되는 경우가 많다. 따라서, 완성도 있는 웹사이트 구축을 위해 Twitter Open Graph 개발 문서를 잘 살펴보아야 한다. Twitter의 이미지 권장 크기는 800px X 418px이다. 참고로, 트위터에서는 'Twitter Card' 라고 한다.
3. 내부 링크 구조 최적화
내부 링크는 웹사이트 안에 페이지들을 서로 연결하는 것이다. 마치 책의 목차나 색인처럼 내부 링크는 독자(사용자)와 도서관 사서(검색 엔진)가 웹사이트의 콘텐츠를 쉽게 찾고 이해할 수 있도록 돕는 것이다. 중요한 페이지에 더 많은 내부 링크를 연결하면, 그 페이지가 더 중요하다고 검색 엔진을 알려주는 효과가 있다.
내부 링크 구조 최적화 예시 :
1. 계층 구조 만들기 : 예를 들어, 요리 사이트를 운영한다고 가정해보겠다.
- 홈페이지
- 요리 레시피 (메인 카테고리)
- 한식
- 비빔밥 레시피
- 김치찌개 레시피
- 양식
- 파스타 레시피
- 스테이크 레시피
- 한식
- 주방 도구 리뷰
- 요리 팁
- 요리 레시피 (메인 카테고리)
이런 구조로 만들면, 사용자와 검색 엔진 모두 사이트의 구조를 쉽게 이해할 수 있다. 더욱더 자세히 들여다보면 관련 콘텐츠끼리 잘 연결하거나 네비게이션 메뉴 최적화, 태그 클라우드 (#한식, #찌개류), 브레드크럼(Breadcrumb), 인기 콘텐츠 하이라이팅 같은 개념들이 있지만 위 구조만 갖춰도 훌륭하다.
내부 링크 구조 최적화에 마지막 Tip을 더하자면 404 페이지 최적화를 추천한다. 잘못된 URL로 접속했을 때 나오는 404 오류 페이지에 유용한 링크 (ex. 메인 카테고리, 인기 포스트 등)를 제공하면 사용자 경험이 향상되고 검색 엔진이 사이트의 구조와 중요한 페이지를 더 잘 이해할 수 있다.
4. 페이지 URL 최적화
URL은 웹페이지의 주소이다. 좋은 URL은 간단하고 이해하기 쉬워야 한다. 예를 들어, www.myblog.com/best-seo-tips-2024와 같이 페이지 내용을 잘 설명하는 URL이 좋다. 이렇게 하면 사용자들이 링크만 보고도 페이지 내용을 예측할 수 있고, 검색 엔진도 페이지 주제를 더 잘 이해할 수 있다.
5. 이미지 최적화
이미지 최적화는 그림에 이름표를 다는 것과 같다. 'alt 텍스트'는 이미지를 설명하는 짧은 문구로, 시각 장애인용 스크린 리더가 이를 읽어준다. 또한, 이미지가 로드되지 않을 때 대신 표기된다. 따라서, 파일명도 의미 있게 지어야 한다. 예를 들어, 'IMG(2).jpg" 대신 'coffee-on-the-table'와 같이 이미지 내용을 설명하는 이름을 사용하는 것이 좋다. 많은 기획자나 개발자들이 놓치는 부분이니 개발자들에게 웹사이트에 올릴 사진을 전송할 때, 꼭 alt 텍스트와 같이 전송해 주면 SEO에도 도움 되고 시각 장애인분들에게도 큰 배려를 할 수 있다.
6. 캐노니컬 태그 작성
캐노니컬 태그는 중복 콘텐츠 문제를 해결하는 도구이다. 예를 들어, 같은 제품이 여러 카테고리에서 나타나거나, 모바일 버전과 데스크톱 버전의 페이지가 따로 있을 때 사용한다. 그리고 마케팅 때문에 UTM 파라미터가 붙은 링크들이 많아 여러 링크가 하나의 페이지를 가리킬 때도 사용한다. 이 태그는 검색 엔진에게 "이 페이지가 원본이고, 다른 비슷한 웹 페이지들은 무시해도 됩니다."라고 알려주는 역할이다.
예를 들어, 아래 2개의 링크가 있다.
1) www.habwa.com
2) www.habwa.com?utm_source=naver&utm_medium=banner&utm_campaign=winter _sale
2번 같은 링크는 마케터가 사용자의 유입을 파악하기 위해서 UTM 파라미터가 적용된 URL을 만든 경우이다. 1,2번 모두 같은 페이지를 가리키고 있기 때문에 구글의 SEO입장에서는 어떤 주소가 원본인지 헷갈릴 수 있다.
따라서, 아래와 같이 <head> 태그 안에서 <link rel = "cannonical" href="{원본 페이지}"> 표준 페이지를 명시하는 것이 좋다.
<html>
<head>
<title>Explore the world of dresses</title>
<link rel="canonical" href="https://example.com/dresses/green-dresses" />
<!-- other elements -->
</head>
<!-- rest of the HTML -->
7. 백링크 전략
백링크는 다른 웹사이트에서 우리의 웹사이트로 연결되는 링크이다. 이는 마치 다른 사람들이 우리의 웹사이트를 추천하는 것이다. 검색 엔진은 이런 '추천'을 높이 평가한다. 하지만 중요한 것은 양보다 질이다. 신뢰할 수 있고 관련성 높은 웹사이트에서 오는 몇 개의 백링크가 수많은 저품질 백링크보다 가치 있다는 것을 잊지 말자.
8. 사이트 로딩 속도 및 모바일 최적화
사이트 로딩 속도는 웹페이지가 사용자의 화면에 나타나는데 걸리는 시간을 의미한다. 모바일 최적화는 웹사이가 스마트폰이나 태블릿에서도 잘 작동하고 보기 좋게 만드는 것이다. 측정하는 기준으로 구글이 제시하는 'Core Web Vitals'가 있다. 'Core Web Vitals'은 웹사이트의 경험을 측정하는 구글의 기준이다. 쉽게 말해서 얼마나 빠르고, 안정적이고, 사용하기 편한지를 평가한다.
Core Web Vitals의 측정 항목 (링크)
- LCP (Largest Contentful Paint) : 직접적으로 사이트 로딩 속도와 관련됨, 페이지의 주요 컨텐츠가 얼마나 빨리 로드되는지를 측정. 첫 2.5초 이내에 LCP가 발생되어야 함.
- FID (First Input Delay) : 사이트의 반응성과 관련됨. 우수한 사용자 환경을 FID가 100밀리초 미만이 되어야 함. 특히 모바일 최적화에도 중요함.
- CLS (Cumulative Layout Shift) : 시각적 안전성 추구. 모바일 기기에서의 화면 크기가 제한되어 있어 레이아웃 변화가우수한 사용자 환경을 제공함.
Core Web Vitals는 사이트 로딩 속도와 모바일 최적화를 포함한 전반적인 웹사이트 성능을 측정하는 구체적인 지표이다. SEO 관점에서 사이트 로딩 속도와 모바일 최적화를 개선하고자 하는 노력은 궁극적으로 더 나은 사용자 경험을 제공하고 검색 엔진 순위에 개선된다.
9. 표제 태그 (H1, H2, ...) 및 구조화된 마크업 작성
표제 태그(H1, H2, ...)는 웹페이지의 제목과 소제목을 나타내는 방법이다. H1은 책의 제목, H2는 장(章)의 제목, H3는 절(節)의 제목과 같다. 이렇게 하면 독자(사용자)가 글의 구조를 쉽게 이해할 수 있고, 도서관 사서(검색 엔진)도 책의 내용을 더 잘 정리할 수 있다.
예시:
- H1 태그:
- 페이지의 주제를 나타내는 가장 중요한 제목
- 일반적으로 페이지당 하나만 사용
- 예: <H1>클라우드 컴퓨팅의 장점과 도입 방법</H1>
- H2 태그:
- 주요 섹션의 제목
- 예: <H2>클라우드 컴퓨팅의 비용 절감 효과</H2>
- H3-H6 태그:
- 하위 섹션의 제목, 계층 구조에 따라 사용
- 예: <H3>초기 투자 비용 감소</H3>
구조화된 마크업은 웹페이지에 특별한 라벨을 다는 것과 같다. 예를 들어, 온라인 쇼핑몰에서 제품 정보에 '가격', '브랜드', '리뷰' 등의 라벨을 붙이는 것이다. 이렇게 하면 검색 엔진이 정보를 더 정확하게 이해하고, 검색 결과에서 별점이나 가격 같은 추가 정보를 보여줄 수 있다. 마치 도서관 책에 상세한 분류 라벨을 붙여 이용자가 원하는 책을 더 쉽게 찾을 수 있게 하는 것과 비슷하다.
예시:
- Schema.org 사용:
- 가장 널리 사용되는 구조화된 데이터 형식
- 예: 제품, 리뷰, 이벤트, 레시피 등의 정보를 마크업
- JSON-LD 형식:
- Google이 권장하는 구조화된 데이터 구현 방식
- 예:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "엔터프라이즈 클라우드 솔루션",
"description": "대규모 기업을 위한 확장 가능한 클라우드 인프라",
"brand": {
"@type": "Brand",
"name": "CloudTech Inc."
}
}
</script>
이 두 가지를 잘 활용하면, 사용자는 웹사이트의 정보를 더 쉽게 찾고 이해할 수 있고, 검색 엔진은 웹사이트의 내용을 더 정확하게 파악하여 적절한 검색 결과를 제공할 수 있다.
내가 제시한 9가지 외에도 더 많은 테크니컬한 SEO 전략들이 있다. 도메인에 따라서 구조적으로 SEO 방법론이 달라진다. 내가 제시한 SEO 방법론을 모두 지킨 다음 특정 도메인에 맞게 SEO 전략을 고도화해야 한다.
참고로 네이버 웹마스터 도구에서 사이트 간단 체크를 통해 기본적인 SEO 사항들을 체크해볼 수 있다. 따라서, 너무 복잡하면 네이버의 사이트 간단 체크 기능을 사용하는 것도 좋다.
SEO와 BERT
SEO의 최적화를 한 문장으로 정리하면 '구조적인 설명'이라고 할 수 있다. '구조'에 대한 설명은 앞에서 충분히 다뤘고 '설명'에 대한 설명(?)을 더하자면 키워드 중심에서 콘텐츠의 맥락과 사용자 의도 충족에 초점을 맞추는 방향이 좋다. 즉, 구글의 자연어 처리 모델 BERT로 인해 검색 엔진이 사용자의 검색 의도를 더 정확하게 파악할 수 있게 되었으므로 키워드를 억지로 끼워 넣는 것 (keyword stuffing)보다는 자연스러운 문맥으로 사용자의 니즈를 충족하는 설명을 해야 한다. (BERT에 대한 설명은 이전 글인 'Ali Express 상품 리뷰를 통한 감정 모델 분석'을 참고)
즉, 검색 쿼리의 맥락과 의도를 더 정확하게 이해할 수 있어 사용자의 검색 의도에 맞춰 자연스러운 문장으로 Meta Description, 이미지 Alt 텍스트, 제목 태그 등을 작성해야 한다.
키워드 중심 전략 VS 콘텐츠 맥락과 사용자의 의도 충족 전략
예를 들어, '클라우드 컴퓨팅 솔루션' 관련 콘텐츠를 작성한다고 예시를 들겠다.
키워드 중심 전략 (Keyword Stuffing):
제목: "최고의 클라우드 컴퓨팅 솔루션 제공"
내용: "우리 회사는 최고의 클라우드 컴퓨팅 솔루션을 제공합니다. 클라우드 컴퓨팅 솔루션을 통해 기업의 IT 인프라를 혁신할 수 있습니다. 우리의 클라우드 컴퓨팅 솔루션은 안정적이고 확장 가능합니다."
이러한 접근 방식의 문제점:
- "클라우드 컴퓨팅 솔루션"이라는 키워드를 과도하게 반복
- 실제 제품/서비스의 특징이나 이점에 대한 구체적인 정보 부족
- 고객의 실제 니즈나 문제점을 다루지 않음
콘텐츠의 맥락과 사용자 의도 충족 전략:
제목: "중소기업의 디지털 전환을 위한 맞춤형 클라우드 솔루션: 비용 절감과 효율성 향상의 핵심"
내용: "디지털 전환의 시대, 중소기업들은 IT 인프라 구축과 유지보수에 따른 높은 비용과 전문 인력 부족 문제에 직면해 있습니다. 이러한 도전을 해결하기 위해 우리 회사는 중소기업에 특화된 클라우드 컴퓨팅 솔루션을 제공한다.
우리의 솔루션이 제공하는 주요 이점:
- 비용 효율성
- 초기 투자 비용 70% 절감
- 사용량 기반 과금으로 운영 비용 최적화
- 확장성과 유연성
- 비즈니스 성장에 따른 즉각적인 리소스 확장 가능
- 계절적 수요 변동에 탄력적 대응
- 보안 및 규정 준수
- 업계 표준 암호화 및 다중 인증 시스템 적용
- GDPR, CCPA 등 국제 데이터 보호 규정 준수
고객 사례: A중소기업은 우리의 클라우드 솔루션 도입 후 연간 IT 비용을 35% 절감하고, 시스템 다운타임을 99.9% 감소시켰습니다.
이러한 접근 방식의 장점:
- 특정 타겟(중소기업)의 니즈와 문제점에 초점을 맞춘 솔루션 제시
- "클라우드 컴퓨팅 솔루션"이라는 키워드를 자연스럽게 포함하면서도 관련 내용을 충실히 다룸
- 구체적인 이점과 수치를 제공하여 신뢰성 확보
- 고객 사례를 통해 실제 효과를 입증
- 잠재 고객의 의사결정에 도움이 되는 실질적인 정보 제공
이 두 번째 접근 방식은 BERT와 같은 고급 자연어 처리 모델이 내용의 맥락과 의도를 이해할 수 있다는 점을 활용한다. 결과적으로 이러한 콘텐츠는 잠재 고객에게 더 유용하며, 검색 엔진에서도 더 높은 평가를 받을 가능성이 높다.
마무리
몇 달 동안 밤낮으로 노력한 끝에, 기획자들은 사용자 중심의 웹사이트를 완성하고 디자이너들은 눈을 사로잡는 인터페이스를 만들어내며, 개발자들은 모든 것이 완벽하게 작동하는 웹사이트를 구현했더라도 SEO를 간과했다면 기대한 유입의 효과가 나타나지 않을 수 있다.
아무리 뛰어난 웹사이트라도, 사용자들이 검색해서 찾을 수 없다면 무용지물이다. 그러한 의미에서 SEO는 웹사이트를 사용자들에게 연결해주는 다리이다. 단순히 기술적인 최적화를 넘어, 사용자의 의도를 이해하고 사용자에게 가치 있는 콘텐츠를 제공하는 것은 우리가 웹사이트를 만드는 궁극적인 목적과도 일치한다. 따라서, 프로젝트의 시작 단계부터 SEO 전략을 세우고 사용자에게 진정한 가치를 전달하기를 추천한다.
'My Work > 웹 & 앱 서비스' 카테고리의 다른 글
| AWS Bedrock : Prompt Engineering Labs (0) | 2024.08.13 |
|---|---|
| AWS Bedrock : Chatbot with RAG 만들기 (0) | 2024.08.09 |
| Sementic Search (시맨틱 검색)_토스는 똑똑해 (0) | 2024.08.04 |
| Ali Express 상품 리뷰를 통한 감정 모델 분석 (0) | 2024.06.21 |
| 모두의 주차장 서비스 개선하기 feat. 피처 벡터 (0) | 2024.06.07 |
