PProduct Owner 이야기

FE 개발자와 SEO 적용하기

0
Shares
0
0
0
0
Table of Contents
  1. Meta Data
  2. Sitemap.xml
  3. Google Search Console 도메인 전략
  4. Structured Data
  5. SEO 작업도 끝이 없다.

2021 CTR 연구결과에 따르면, 대부분의 사용자들은 유료 광고를 클릭하는 것보다 검색한 결과를 클릭하는 것을 선호하며 검색 결과 페이지에서 1페이지는 71.33%, 2페이지와 3페이지에서는 5.59%의 클릭이 발생했다. 또한, 1페이지라도 상단 5개의 검색 결과에서 67.60%의 클릭률이 발생한다. 따라서, SEO 작업을 통해 검색결과 첫 페이지의 상위 5위 안에 드는 것이 중요하다.

Studies indicate that “71.33% of searches resulted in a page 1 Google organic click. Page two and three only get 5.59% of clicks. On the first page alone, the first five results account for 67.60% of all the clicks and the results from 6 to 10 account for only 3.73%.”

https://www.zerolimitweb.com/organic-vs-ppc-2021-ctr-results-best-practices/

이번 포스팅에서는 내가 담당하고 있는 Product의 FE 개발자와 SEO를 적용하면서 알게된 사항들을 공유하고자 한다.

Meta Data

검색 엔진은 Meta Tag를 통해 해당 페이지에 콘텐츠를 파악하고, 수집한 정보를 검색사이트의 검색 결과 페이지에 노출해 준다.

  • html tag
    • lang 속성
      • 어떤 언어가 사이트의 기본 언어가 구성되어 있는지 규정한다.
      • CRA로 구성된 웹앱의 경우, 자동으로 en 으로 설정된다.
  • title tag
    • 검색 엔진이 제일 먼저 읽는 메타정보이며, 브라우저 탭에도 표시된다.
  • meta tag
  • OG tag(Open Graph)
    • 참고 : https://ogp.me/
    • Facebook과 같은 SNS 공유 시에, 콘텐츠가 표시되는 방식을 관리하기 위한 태그이다.
<html prefix="og: https://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

Sitemap.xml

Sitemap.xml(사이트 맵)  파일은 검색 엔진 크롤링 로봇에게 웹 사이트에서 크롤링 해야 할 URL 을 전달한다. 사이트 맵을 지원하는 검색 엔진은 이 정보를 사용하여 웹 사이트 크롤링을 보다 효율적으로 할 수 있게된다.

여기에서 sitemap과 robots.txst 파일의 차이점을 이해할 필요가 있다.

  • robots.txt : 크롤링 할 수 없는 페이지는 robots.txt 파일을 이용하여 지정해야 한다. 즉, 크롤링허용하거나 허용하지 않는 규칙을 정할 때 사용한다.
  • sitemap : 크롤링할 수 있거나 할 수 없는 콘텐츠를 표시하는 것이 아니라 크롤링을 해야 하는 콘텐츠를 표시할 때 사용한다.

Sitemap.xml 파일 생성

sitemap.xml은 일반적으로 root 위치에 물리적으로 존재해야 하며, 아래와 같은 양식으로 생성할 수 있다.
참고 : sitemaps.org

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<!--  created with Free Online Sitemap Generator www.xml-sitemaps.com  -->

<url>
<loc>Product 도메인</loc>
<lastmod>2021-10-25</lastmod>
<video:video>
<video:thumbnail_loc>영상 섬네일 이미지 url</video:thumbnail_loc>
<video:title>비디오 타이틀</video:title>
<video:description>비디오 상세설명 </video:description>
<video:player_loc allow_embed="yes">비디오 url(youtube url도 가능)</video:player_loc>
<video:duration>60</video:duration>
</video:video>
<priority>1</priority>
</url>
<!-- 영상 매체를 추가하고자 할 경우 -->

<url>
<loc>Product 메뉴 url</loc>
<lastmod>2021-10-25</lastmod>
<priority>0.5</priority>
</url>
<!-- 일반적으로 Product의 메뉴 url을 추가한다 -->

<url>
....
</url>

</urlset>

<Sitemapindex> 활용하기

Sitemapindex 파일은 여러개의 sitemap 파일들을 그룹화하여 관리하기 위한 목적으로 활용된다.구글에서 ‘크라우드웍스 개발자 채용 공고’를 검색하면 원티드나 잡코리아의 상세 채용페이지가 검색결과에 나온다. 이렇게 세부 콘텐츠도 검색엔진에 노출되게 하려면 새로 추가되는 콘텐츠가 자동으로 sitemap에 반영되어 검색엔진이 자동으로 크롤링을 할 수 있도록 해야 하는데 이 과정에서 <sitemapindex> 이 활용된다.
실제로, 원티드의 sitemap.xml 파일도 아래와 같은 형태로 구성되어 있음을 알 수 있다.

<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap>
<loc>https://yourdomain.com/sitemap-contents.xml</loc>
<lastmod>2021-12-12</lastmod>
</sitemap>

</sitemapindex>
  • <loc> : 주기적으로 업데이트 되는 콘텐츠 url 리스트 정보를 담고 있는 sitemap 파일의 경로이다. 각 sitemap 파일에 포함된 url 리스트는 지속적으로 업데이트되는 콘텐츠 url이며 해당 url들을 검색엔진이 크롤링해간다.(위 예시에서 언급한 크라우드웍스의 개발자 채용공고 콘텐츠가 해당 url에 포함된다. )
  • <lastmod> : 해당 xml 파일의 업데이트 날짜 정보
  • 참고 : sitemaps.org

우리팀은 해당 작업을 진행하는 과정에서 3개의 파일을 생성했다.

  • sitemap.xml
  • sitemapindex.xml
  • sitemap_contents.xml : sitemapindex.xml 에서는 sitemap_contents.xml 파일과 같이 contents들의 url을 포함하고 있는 sitemap 파일들을 그룹화하여 관리함.

여기에서 중요한 것은 <loc>태그에 들어갈 sitemap_contents.xml 파일은 수천개의 콘텐츠 url을 담고 있으며 해당 xml 파일이 자동으로 업데이트 되기 위해서는 BE 엔지니어의 도움이 필요하다. 이 과정에서 PO는 각 url의 업데이트 정책을 수립해야 한다.

Robots.txt 파일에 Sitemap 파일 적용하기

sitemap 파일 작업이 완료되었으면 해당 파일을 robots.txt 파일에도 적용할 필요가 있다. 아래와 같이 적용할 수 있다.

# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
Sitemap: https://yourdomain.com/sitemap.xml
Sitemap: https://yourdomain.com/sitemapindex.xml

Google Search Console 도메인 전략

Meta tag와 Sitemap.xml 파일을 생성하였으면 이제 Google Search Console(이하 GSC)에 도메인을 등록하고 sitemap을 제출해야 한다. 만약 하나의 상위 도메인을 중심으로 여러 하위 도메인을 운영중이라면 GSC에서의 관리를 위한 도메인 전략이 필요하다. 여기에서는 상위도메인에 여러개의 하위 도메인을 운영중인 상황으로 설명을 하도록 하겠다.

  • 상위 도메인 : mydomain.com
  • 하위 도메인 1 : www.mydomain.com
  • 하위도메인 2 : blog.mydomain.com
  • …

GSC에 도메인 등록을 하기 전에 참고로 알아두어야 할 사항이 있다. 위 도메인에서 mydomain.com과 www.mydomain.com 도메인은 서로 다른 도메인이라는 것이다. 따라서, GSC에서 각각 속성등록을 해야 한다.

상위 도메인 속성 등록

GSC에서 속성등록을 할 때 아래와 같은 화면이 나오는데 여기에서 mydomain.com 도메인을 입력하고 도메인 인증을 받도록 한다. (상위 도메인은 DNS 인증이 필요하므로 BE 개발자의 도움이 필요할 수 있다.) 상위 도메인에 대한 인증을 받으면 하위 도메인은 자동으로 인증받은 것으로 간주되기 때문에 여러번 인증을 받을 필요가 없으므로 편리하다.

GSC 속성등록 시 화면

하위 도메인 속성 등록 및 sitemap 제출

위에서 언급했듯이 mydomain.com과 www.mydomain.com 도메인은 서로 다르다. 따라서, 서버설정을 통해 mydomain.com 도메인으로 접속된 경우 자동으로 www.mydomain.com 으로 redirect 시키도록 서버설정을 하는 것이 좋다. 이 때, 서버 설정을 통해 301 redirection을 시키는 것이 표준방법이다.

이렇게 redirect를 시켜야 하는 이유는 서로 다른 도메인에 동일한 콘텐츠가 존재 할 경우 검색엔진은 이를 부정적으로 평가하기 때문이다. 즉, mydomain.com과 www.mydomain.com 은 서로 다른 도메인인데 동일한 콘텐츠가 존재하는 것으로 인지하는 것이다. 그래서 애초에 www.mydomain.com 도메인으로만 접속되도록 하여 중복된 콘텐츠가 존재하지 않도록 하는 것이다.

참고로, http로 접속할 경우 https가 붙도록 하는 설정이 안 되어 있다면 위 redirect 작업을 하면서 같이 하는 것이 좋다. 어차피 이 작업도 위 작업과 동일한 방식이다.

위 작업이 완료되었다면 이제 하위 도메인에 대한 sitemap을 GSC에 제출하기만 하면 된다. 나는 sitemap.xml 파일과 sitemapindex.xml 파일을 모두 제출하였다.

Structured Data

구조화된 데이터는 검색엔진에 JSON 형태로 페이지 내용을 알려주어 더 풍부한 검색 결과를 제공하는 방법이다. 구조화된 데이터 작업을 위해서는 Schema.org – Schema.org 에서 제공하는 type 과 property 를 이용해야한다.

schema.org에서는 아래와 같은 세 가지 언어 형식을 지원한다.

  • Microdata
  • RDFa
  • JSON-LD ; 페이지 내 head, body 태그 내에 삽입되는 자바스크립트 표기
Google과 Naver에서는 JSON-LD 형식을 권장한다.

구조화된 데이터 작업을 통해 우리가 얻을 수 있는 것

로고적용 : 검색 결과에 로고가 노출될 수 있도록 적용할 수 있다.

참고 : Google – 고급검색엔진 최적화 – 로고

아래 이미지처럼 검색창에서 미리 로고를 보여줄 수 있다.

아래 이미지처럼 검색결과 우측에 해당 기업의 로고가 나온다. 참고로 우측의 기업정보는 Google 비즈니스 프로필에서 관리할 수 있다.

채용정보 : 검색 결과에서 채용정보를 노출시켜 구직자 환경에 최적화된 검색결과에 노출시킬 수 있다.

참고 : Google – 채용정보에 구조화된 데이터

SEO 작업도 끝이 없다.

SEO에 대해서 관심을 갖기 전까지는 잘 몰랐는데 워드프레스에서 많이 사용되는 Yoast SEO 같은 플러그인들은 정말 대단한 소프트웨어인 것 같다. 위에서 언급한 SEO 작업은 굉장히 일부이며 Contents SEO까지 들어가면 알아야 할 것이 더 많다. 특히, SNS에 콘텐츠를 공유할 때 필요한 메타정보 관리방안에 대해서도 R&D가 필요할 듯 하다.

0 Shares:
Share 0
Tweet 0
Pin it 0

평범한 Product Owner에요. 지금은 AI 학습데이터 가공 플랫폼 기업에서 일하고 있어요.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

— Previous article

PO = Problem Owner?
Next article —

에어테이블을 활용해서 $20로 영업 리드 관리 시스템 만들기

You May Also Like
Read More
  • 1 minute read
PProduct Owner 이야기

기획자와 스토아철학

기획자로서 일을 하다보면 생각보다 많은 부분에서 우울할 때가 있다. 그 우울함이 심해지면 '나는 과연 필요한 존재가 맞는가?'라는 생각까지 들곤 한다. 문제는 이런 경험을 자주 할수록 자존감이 낮아진다는 것이다. 내가 겪어온 경험을 토대로 이 문제를 어떻게 극복했는지 이야기하고자 한다.
Read More
  • 1 minute read
EEssay

내 리더가 회사를 떠났다.

어떤 한 사람이 있다. 그 사람을 보면서 나는 이런 생각을 했다. "저 분의 인성과 역량을 닮고 싶다. 내 아들이 커서 어른이 된다면 나의 모습보다는 저 분의 모습을 닮았으면 좋겠다." 그 분은 내가 현재 재직중인 회사의 CTO이자 나의 리더였다. 아이러니하게도 그 분과 나는 전혀 다른 성격의 소유자이고 업무 스타일도 많이 달랐다. 하지만 난 정말로 그분을 닮고 싶었다.
2021년 회고
Read More
  • 1 minute read
EEssay

2021년 회고(Product Owner, 가족, 성장)

회사에는 동료와 일이 있다. 가정에는 아내와 애들, 육아업무가 있다. 그러나 그 어디에도 나는 없었다. 원래 나 본연의 내가 존재할 수 있는 시간과 장소는 없었다. 단지, 의무로서의 나만 존재했다. 언뜻 생각해보면 참 서글프기도 하지만 잘 생각해보면 꼭 그렇지도 않다. 현재 나의 상황, 역할, 가족, 일.....그 모든 것이 결국은 나를 구성한다. 원래 나 본연의 나는 처음부터 없는 것인지도 모르겠다.