검색엔진최적화 된 사이트를 구축하기 위해서는 웹표준에 적합한 HTML 마크업이 필수적입니다. 네이버 혹은 구글과 같은 검색엔진은 검색유저가 보는 외적인 콘텐츠를 포함한 전체적인 메타 영역 또한 크롤링 합니다. 대표적인 HTML 메타 영역은 head에 위치하고 있으며 앞전에 META태그 정리 및 활용 방법 편에서 다룬적이 있습니다.
메타 태그를 포함한 태그들은 원고의 교정부호와 주석을 표현하기 위한 것으로 만들어 졌지만 최근들어 의미가 확장되어 구조를 표현하는 역활을 하게 되었습니다.
HTML 마크업이 잘 되어있지 않다면 네이버 서치 어드바이저에서 ‘사이트 구조’ 부분에서 경고표시를 받을 수 있습니다. 네이버 최적화 점검시 주의사항 편에서 자세한 내용을 확인하실 수 있습니다.
사이트를 직접 제작하거나 SEO를 함께 해주는 업체에 의뢰하여 제작하는 경우가 아니라면 이러한 HTML 마크업 단계를 무시하고 지나칠 수 있습니다. 이후에 마크업을 원하시는 경우에는 추가 비용이 발생할 수 있으며 수정 작업이 들어가기 때문에 복잡해질 수 있습니다. 누구나 쉽게 이해할 수 있는 네이버 HTML 마크업 가이드를 준비했습니다.
대표 URL 설정 ( =선호 URL)
기본적으로 검색엔진은 간결하고 명확한 URL을 가장 선호합니다. 대표 URL 설정은 카페 24에서 호스팅 하는 경우 ‘도메인 설정’ 부분에서 간단하게 수정하실 수 있습니다. WordPress 역시 플러그인 설치를 통해 쉽게 수정하실 수 있습니다. 그렇지 않은 경우 아래를 참고합니다.
<head>
<link rel="canonical" href="https://www.hdmwebmaster.com">
</head>동일한 컨텐츠를 여러 URL로 표현이 가능할 경우에는 가장 대표되는 URL을 꼭 지정하여 줍니다. 그럴 경우 가장 간결하게 나타낼 수 있는 URL을 대표로 지정하고 상대경로가 아닌 절대 경로를 지정해주어야 문제가 발생하지 않습니다.
또, 태그를 활용하지 않고 HTTP redirect를 사용하여 사용자를 이동시키는 방법이 있습니다.
로봇 메타테그 활용
이또한 역시 <head> 내에 있는 메타태그를 활용합니다.
<head>
<meta name="robots" content="index,follow">
</head>검색로봇을 따로 제안하거나 웹사이트를 정상적으로 크롤링 하게 도와주기 위해서는 위와같이 지정합니다. 따로 로봇 메타태그를 활용하지 않고 삭제하시면 자동으로 크롤링 할 수 있도록 설정되기도 합니다.
위와같이 로봇 메타태그를 설정한다면 정상적인 색인허용과 웹 페이지 검색결과 반영이 가능해집니다.
웹 페이지 마크업
페이지 제목(title)과 페이지 설명(description)을 메타 태그를 활용합니다. 여기를 클릭하면 자세한 내용을 확인하실 수 있습니다.
제가 말하고 싶은 부분은 모든 웹 페이지의 title과 description을 다르게 지정 해주는 것이 좋다는 것입니다. 사이트를 제작하는 과정에서 title과 description을 모두 다르게 설정한다는 것은 여간 귀찮은일이 아닐수 없습니다. 사이트가 표면적으로는 10~15페이지가 있다고 한다면 실제로 세부적으로 들어가면 30~40페이지 정도가 나옵니다. 모든 페이지에 title과 description을 따로 지정해주시는 것이 가장 좋습니다.
오픈그래프 역시 모두 다르게 지정해주시는 것이 가장 좋습니다. 많은 개발자분들이 명령어를 이용하여 모든 페이지에 title과 description를 일괄적으로 삽입하여 작업 하시는데, 이런 경우에는 사이트 구조 부분에서 좋은 점수를 받을 수 없습니다.
고유한 제목과 사이트 설명을 지정해야 검색유저가 콘텐츠를 찾을 때 쉽게 찾을 수 있습니다. 따라서 일괄된 페이지 제목과 페이지 설명 사용은 하지 말아야 합니다.
*중요 모바일 사용성
반응형 웹사이트란 웹문서의 가로폭을 기기의 스크린에 맞게 자동으로 설정하는 기술을 말합니다. 반응형 웹사이트의 경우 모바일 기기 사용자에게 가독성을 높여주고 콘텐츠 소비를 돕습니다.
따라서 검색엔진도 사용자의 편리함이 잘 되어있는 웹사이트인지 판단합니다. 모바일 사용성이 낮은 사이트의 경우에는 상위노출에 큰 페널티를 받을 수 있습니다.
아래와 같이 메타태그 설정을 진행합니다.
<head>
<meta name="viewport" content="width=device-width">
</head>별도의 모바일 URL을 제공하는 것 역시 가장 좋은 방법 중 하나입니다. 주의하여야 할 점은 검색엔진이 데스크톱 및 모바일 URL을 따로 처리하지 않도록 설정을 해주어야 합니다.
태그를 활용하거나 redirect 처리를 통하여 원활하게 이동할 수 있도록 해주어야 합니다.
HTML을 까보고 직접 <META>를 수정해본다면 누구나 쉽게 네이버 MTML 마크업을 하실 수 있습니다. 위 내용이 전부라고 말할 수는 없습니다. 누구나 쉽게 따라할 수 있도록 제작한 것이며 더 깊숙히 들어가고 싶다면 어느정도 언어에 대한 이해도가 있어야 하겠습니다.