적응형 홈페이지의 SEO는 어떻게 해야할까?

앞서 회사 홈페이지의 정책이 적응형으로 결정이 난 것 같아 적응형에 대한 고찰을 해보고 아래 포스팅 두 개를 남겼다.

2018/09/26 - [본업은 퍼블리셔] - 적응형 웹은 반응형 웹의 반대말일까?

2018/09/28 - [마케터가 되어간다] - 서브 도메인을 쓰게 되면 구글 애널리틱스는 어떻게 해야할까?

이 글 역시 적응형 홈페이지 구축과 관련된 글인데 여기서는 SEO를 어떻게 적용할지에 대해 정리해보려고 한다.

1. html 파일 내에서 설정하기

데스크톱 페이지에서 아래 설정을 추가하고

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1">

<link rel="alternate" media="only screen and (max-width: 640px)"
 href="http://m.example.com/page-1">

<link rel="alternate" media="only screen and (max-width: 640px)"
 href="http://m.example.com/page-1">

<link rel="alternate" media="only screen and (max-width: 640px)"
 href="http://m.example.com/page-1">

모바일 페이지에는 아래 설정을 추가한다.

<link rel="canonical" href="http://www.example.com/page-1">

페이지의 수량이 10개 내외이고 다 static type이면 1번 방법을 적용해도 괜찮겠지만 보통 회사 홈페이지는 그럴 리가 잘 없다.

그래서 사이트맵에서 설정하는 방법도 있다.

2. 사이트맵에서 설정하기

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"> <url> <loc>http://www.example.com/page-1/</loc> <xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" /> <xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/en/page-1" /> </url> <url> <loc>http://www.example.com/en/page-1/</loc> <xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/en/page-1" /> <xhtml:link rel="alternate" hreflang="ko" href="http://www.example.com/page-1" /> </url> </urlset>

위의 예시를 볼 때 고려해야 할 경우의 수가 좀 있는데 우선 국문/영문 홈페이지가 있고 모바일용 페이지가 따로 있는 경우이다.

각 URL별로 모바일용 URL도 지정이 필요하고 언어별 지정도 필요하다.

자동 생성해주는 A1 sitemap generator 같은거 써도 이대로 결과물이 나올지 잘 모르겠다.

반응형 홈페이지라 html이 국문/영문만 있을 때에는 위의 xml 코드에서 모바일용 페이지에 대한 내용만 지우면 된다.

구글 검색 도움말의 별도 URL 항목의 설명이 약간 애매해서 모바일 버전 홈페이지를 위한 사이트맵도 별도로 작성해야하나 싶어 찾아보는데 시간이 꽤 걸렸다. 아무래도 국내 회사들은 구글 검색용 SEO 개선에는 관심이 덜해서 관련 글이 잘 없는 것 같다...

무튼 모바일용 사이트맵 별도 제작은 필요가 없는 듯 하고 위의 코드를 참고해서 URL별로 확산을 해주면 될 것 같다.

※ 본 포스팅은 아래 article을 참고하여 작성되었습니다.

1) 별도 URL by Google Search

2) Sitemaps & <link rel=… for quad-directional websites from StackExchange