구현중인 웹서비스는 '검색엔진 노출 -> 사용자 유입 -> 카카오톡 채팅 상담' 으로 이루어져야 하는 광고성 웹페이지다.
검색엔진 최적화가 정말 중요한 웹서비스라 볼 수 있다. (안중요한 서비스가 있을까?🤔)
근데 사실 지금까지 프로젝트를 진행하면서 SEO를 진지하게 고민하면서 해본 적이 없다...!
(Semantic Tag를 사용하려고 노력한 정도? 뿐이다)
하여 이번 기회에 SEO에 대해 다시 한번 이해하고 설계해보고자 한다.
SEO란?
SEO는 ‘Search Engine Optimization’의 약자로 Search Engine, 즉 구글과 같은 검색엔진에 친화적인 사이트를 구축하여 광고가 아닌 자연 검색 결과를 통해 트래픽의 양과 질을 극대화하는 작업을 의미한다. 트래픽과 사용자 유입이 많으면 당연히 웹사이트의 성공에 직접적인 영향을 미친다.
예를들어 네이버나 구글과 같은 포털사이트에 (1) '발리 여행'을 검색한다.
그러면 위와 같은 검색 결과 페이지를 보여주는데 이는 (2) 크롤러가 웹페이지의 데이터를 검색엔진으로 가져와 (3) 검색엔진이 검색의도에 맞춰 콘텐츠의 순위를 매기고 (4) 랭킹 순서대로 결과 값을 보여주는 것이다.
SEO는 검색 결과 순위를 상위로 올리는 것이 핵심이다. 랭크가 상위에 위치할 수록 노출이 많아지고 사용자의 클릭률(CTR)이 높아진다. 이러한 검색 순위를 결정하는 요소는 복잡한 알고리즘에 의해 결정된다.
검색 키워드와 콘텐츠와의 관련성을 분석하는 것 뿐만아니라,
- 사용자의 행동 분석
- 검색어의 맥락과 의도
- 그에 따라 달라지는 가중치 (예를 들어, 특정 검색어에 대해 사용자의 경험이 더 중요한 경우도 있고, 다른 검색어에 대해서는 콘텐츠의 최신성에 더 중요한 경우도 있다)
- 콘텐츠의 전문성
- 페이지의 사용자경험 (페이지의 로딩속도, 모바일 친화성 등)
등...
위의 요소들 외에도 여러 요소들을 고려하여 검색엔진 결과 페이지를 완성한다.
✔️프론트엔드 개발에서 SEO를 고려해야 하는 이유
프론트엔드 개발에서 SEO를 고려하는 것은 사용자 + 검색엔진 모두에게 최적화된 경험을 제공하기 위해 중요하다
검색엔진 측면:
검색엔진은 웹페이지의 구조, 콘텐츠, 성능 등 다양한 요소를 평가하여 순위를 정한다. 때문에 웹사이트의 구조를 검색엔진이 이해하기 쉽게 만들어야한다. 이렇게 잘 설계된 웹사이트는 검색 엔진에서 상위에 랭크된 페이지는 더 많은 방문을 유도한다.
사용자 측면:
웹사이트의 로딩 속도와 모바일 친화성을 최적화하는 것이 중요하다. 이는 사용자에게 더 나은 경험을 제공하고 SEO에도 영향을 미친다.
✔️주요 용어
index(색인) : 모든 웹페이지(url) 내용을 저장하는 것을 말함. 검색포털이 잘 가져갈 수 있도록 구조화를 하는 과정
메타태그 : 웹페이지의 메타 정보를 제공하는 HTML 태그로, 검색 엔진에 페이지의 제목, 설명, 키워드 등의 정보를 제공
크롤링 : 검색엔진이 온라인에 있는 수많은 웹페이지를 추출하여 수집하는 과정.
크롤러: 웹페이지를 크롤링한 후에 색인을 생성하는 자동 소프트웨어.
구글봇: 구글의 크롤러 이름 '구글봇'
✔️SEO를 위한 전략 분석
나는 그러면 웹사이트가 상위에 랭크되게 하려면 무엇을 해야할까 고민해본다🤔
위의 정리 내용을 정리하면
'구글봇(웹 크롤러)이라는 크롤러가 내 사이트에 와서 크롤링을 해서 색인에 저장을 한다. 색인된 콘텐츠를 랭킹하여 순서대로 결과를 제공한다.'
라고 말할 수 있다.
그럼 나는 크롤러가 데이터를 저장을 잘 해주게끔 웹사이트를 만들면 된다.
크롤러가 정보를 더 잘 찾고 분류해서 저장을 하려면 html 태그 중 <head> </head> 영역에다가 정보를 잘 적어줘야한다.
이때 사용하는 것이 Meta Tag이다.
- 메타 태그의 적절한 사용
웹문서가 정제되지 않게 등록이 되어있으면 검색엔진이 의미있는 키워드를 뽑아내기가 어렵다.
아래와 같이 제목과 설명과 키워드 등을 메타태그에 잘 정제해서 만들어두면 검색엔진이
"ok. 너가 적어둔 이 정보 먼저 수집을 해갈게~"
이런식으로 작동한다.
다행히 검색엔진이 잘 수집해갈 수 있도록 구글이나 네이버에서 검색엔진 최적화 가이드를 제공하고 있다.
물론! 위에서도 말했지만 구조가 잘 정제되어있다고 무조건 상위에 랭크되는 것은 아니다.
기본적으로 설정해야하는 메타태그
<meta name="description" content="A description of the page">웹 페이지에 대한 설명 요약글을 정의한다.
검색 엔진에 영향 X -> 노출을 목표로하는 키워드를 반복해서 적어도 순위에 무관하다
클릭률(CTR)에 영향 O -> 요약문을 보고 본인이 찾는 정보라고 한다면 사용자의 클릭율이 올라간다.
영어 기준 160자 이내 / 한글 기준 80~110자가 적당하다
<meta name="keyword" content="HTML, meta, tag, element, reference">검색엔진을 위한 키워드를 정의한다.
<meta name="robots" content="index, follow">크롤러가 내 사이트에 와서 정보를 가져갈 수있게끔 해주는 태그이다.
로봇에 대한 설정이라고 보면 된다.
index - 컨텐츠를 색인을 할것인지 할건지.
follow - 링크를 따라서 크롤러가 이동하게 할것인지 아닌지
- OG(오픈그래프)
페이스북과 같은 SNS 플랫폼에 콘텐츠를 공유할때 최적화된 데이터를 가지고 갈 수 있도록 설정하는
메타태그에 있는 정보로 미리보기 화면을 구성한다.
*이미지의 경우 최소한 600 x 315 픽셀은 되어야 하며, 1200 x 630 픽셀 크기를 권장*
기본적으로 웹에 설정해줘야 하는 og 메타태그
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- 다음의 태그는 필수는 아니지만, 포함하는 것을 추천함 -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
트위터 미리보기 설정
<meta name="twitter:card" content="트위터 카드 타입(요약정보, 사진, 비디오)" />
<meta name="twitter:title" content="콘텐츠 제목" />
<meta name="twitter:description" content="웹페이지 설명" />
<meta name="twitter:image" content="표시되는 이미지 " />
모바일 앱 미리보기 설정
모바일 앱이 존재하는 경우 앱으로 연결 시 노출
<--iOS-->
<meta property="al:ios:url" content=" ios 앱 URL" />
<meta property="al:ios:app_store_id" content="ios 앱스토어 ID" />
<meta property="al:ios:app_name" content="ios 앱 이름" />
<--Android-->
<meta property="al:android:url" content="안드로이드 앱 URL" />
<meta property="al:android:app_name" content="안드로이드 앱 이름" />
<meta property="al:android:package" content="안드로이드 패키지 이름" />
<meta property="al:web:url" content="안드로이드 앱 URL" />감이 안온다면 페이지 소스를 까보자!
페이지 소스를 실제로 보면 meta tag가 설정되있는걸 알수있다.
- 시맨틱 태그 구조 설계
시맨틱 태그는 포함된 콘텐츠의 특정 의미와 목적을 정의하는 태그다.
HTML5이전에는 <div>, <span>을 사용하여 콘텐츠를 구분했지만, 콘텐츠들의 역할이나 구조는 파악하기 어려웠다.
이후 HTML5에서부터 시맨틱 태그의 등장으로 좀 더 명시적이면서 직관적인 구조 설계가 가능해졌다.
대표적인 시맨틱 태그의 요소로는 <header>, <nav>, <article>, <section>, <footer>, <main> 등이 있다.
시맨틱 태그 왜 사용해야 할까?
시맨틱 태그로 마크업 작업을 해줘야지 검색 엔진 크롤러가 웹페이지의 구조에 담긴 정보를 계층에 따라 크롤링을 잘 할 수 있다.
예를 들어, <header> 태그로 감싸진 부분은 머리말임을, <article> 태그로 감싸진 부분은 주요 콘텐츠라는걸 쉽게 파악할 수 있다.
+ 유용한 확장프로그램
헤딩스맵
https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?hl=ko
HeadingsMap
To show, browse and audit (for accessibility and SEO) the headings structure
chromewebstore.google.com
페이지의 헤딩 구조를 직관적으로 볼 수 있다.
+ 나중에 읽어볼 것들
-구글에서 제공한 SEO 우수사례
https://developers.google.com/search/case-studies/overview?hl=ko
검색엔진 최적화 우수사례 및 성공사례 | Google 검색 센터 | Search Central | Google for Developers
검색엔진 최적화 우수사례와 성공사례를 둘러보고 Google 검색으로 내 웹사이트에서 더 많은 사용자에게 도달하는 방법을 직접 확인해 보세요.
developers.google.com
-어떤 개발자의 SEO 최적화 경험
https://brunch.co.kr/@famelee/53
한 달 동안 검색 유저가 750 % 증가했다고?
혼자서 광고 없이, SEO로 서비스 홍보하기 | 목차 1. 혼자서 해보는 SEO 2. SEO 개념 뜯어보기 3. 검색 유저를 750% 늘린 방법 4. SEO, 기다림의 미학 혼자서 해보는 SEO 1. 노션 무료 템플릿 서비
brunch.co.kr
-구글, 네이버 SEO 가이드 정리
https://seo.tbwakorea.com/blog/seo-guide-2022/
SEO (검색엔진 최적화)란? - 구글, 네이버 가이드 총정리
SEO (검색엔진최적화)란 자사 사이트를 검색엔진에 상위 노출시켜 자연적으로 트래픽을 높이는 디지털 마케팅입니다. SEO를 통해 웹사이트 트래픽을 높이는 방법에 대해 알아보세요!
seo.tbwakorea.com
내가 지금 만드는 사이트는 양질의 컨텐츠가 많지 않고, 백링크 형성도 어렵기 때문에 드라마틱한 결과는 기대할 수 없겠지만 그래도 할 수 있을 만큼 해보려고 한다.
그리고 나중에 원하는 서비스의 회사에 들어가게 된다면 아래 우수 사례을 레퍼런스로 꼭 적용해보고 싶다.
참고자료 :
https://developers.google.com/search/docs/crawling-indexing/special-tags?hl=ko
'프로젝트 & 회고 > 웹사이트 기획부터 배포까지' 카테고리의 다른 글
| 웹서비스 기획부터 배포까지 (2) - 기획과 와이어프레임 (0) | 2024.06.19 |
|---|---|
| 웹서비스 기획부터 배포까지 (0). 시작에 앞서 계획과 순서 정리하기 (0) | 2024.06.18 |
