[HTML & SEO] 검색 엔진 최적화(SEO)에 대해서

만약 우리가 React를 통해 Application을 만들면 public 폴더에 robots.txt 라는 파일을 볼 수가 있을 것이다.
robots.txt 는 크롤러에게 어떠한 페이지를 수집할 수 있도록 허용하거나 제한할 수 있도록 알려준다. robots.txt 파일은 항상 사이트의 루트 디렉터리에 위치해야 한다.

다음은 모든 검색엔진의 로봇에 대해 수집 하용을 설정한 robots.txt 의 내용이다.

User-agent: *
Allow: /

네이버와 구글

최적화를 위해서는 네이버, 구글 등의 검색 엔진이 어떻게 동작하는지와
검색 엔진 내의 크롤러라고 하는 로봇이 정보를 잘 수집할 수 있도록 구성하는지 알아야 한다.

위의 말은 곧 네이버와 구글의 검색 엔진이 다르게 동작하는 것을 의미하고,
이 포스트는 구글 검색 엔진의 상위에 랭크될 수 있는 방법을 거론하겠다.

최적화를 위한 방법

1. 올바른 HTML 작성

검색이라는 건 정보를 찾는 행위이고, 정보를 나타내는 마크업 언어는 HTML이다.
즉, 정보를 의미있게 나타나게 하기 위한 적절한 HTML 태그의 사용은 검색 엔진 최적화에 도움이 된다.

title 태그에는 사이트 제목을 기재하고, strong과 em 태그를 활용해 강조하고 싶은 키워드에 붙이는 등 적절한 HTML 소스로 홈페이지를 구성하는 것은 결과적으로 검색엔진에게도 이해하기 쉬운 웹 문서가 된다.

1-1. title 태그

title 태그는 웹 사이트의 제목을 뜻한다.
head 요소 내에 title 태그를 위치하고, 사이트의 고유한 제목 텍스트를 정확하게 기재한다.
그렇게 함으로써 사용자는 물론 검색로봇에게도 웹사이트의 제목임을 알려준다.

구글에서는 다음과 같이 title 태그를 작성하도록 권고한다.

페이지의 콘텐츠 정확하게 설명하기
각 페이지에 고유한 title 요소 만들기
간단하지만 설명이 담긴 title 요소 사용하기

다음을 권고하지 않는다.

title 요소에 페이지 내용과 관련이 없는 텍스트를 사용하는 경우
사용자에게 도움이 되지 않는 title 요소에 매우 긴 텍스트를 사용하는 경우

1-2. meta 태그

페이지의 meta 태그는 검색로봇에게 페이지 내용을 요약하여 제공한다. title 요소와 마찬가지로 meta 태그는 HTML 문서의 head 요소 내에 있습니다.

특히 meta 태그는 구글에서 페이지의 스니펫으로 사용할 수 있기 때문입니다. 구글에서 페이지에 표시되는 텍스트 중에 사용자의 검색어와 잘 어울리는 텍스트가 있는 경우 이를 선택할 수도 있다. 구글에서 스니펫으로 사용할 텍스트를 찾지 못하는 경우도 있기 때문에 meta 설명 태그를 각 페이지에 추가하는 것이 좋다.

구글에서는 다음과 같이 meta 태그를 작성하도록 권고한다.

웹사이트 내 모든 페이지에 동일하지 않은 description을 작성하기
해당 페이지의 title 과 중복되지 않게 작성하기
모든 페이지를 작성할 수 없는 상황이라면, 홈페이지 내 각 페이지에 우선순위를 두어 주요 페이지들만 작성하는 것을 추천

1-3. 오픈그래프 태그

오픈그래프 태그는 웹 페이지를 공유할 때 보여주는 미리보기이다.
검색로봇이 해당 페이지를 먼저 방문한 뒤 미리보기를 만들어준다.
오픈그래프 태그는 다음과 같이 작성된다.

<meta property="og:title" content="Overflowing river of Seience" />
<meta property="og:description" content="related to science in everyday life" />

2. img 태그에 alt 속성 작성

img 태그는 웹 페이지에 이미지를 로딩할 수 있게 하는 태그이다.
이때 img 태그의 속성으로 alt 속성이 있는데, 이는 이미지가 로딩되지 않았을 때, 대신 표시되는 텍스트이다.

다음과 같이 작성할 수가 있다.

<img src={이미지 링크} alt='로고 이미지'/>

위와 같이 alt 속성에는 텍스트가 들어가는데 시각장애인을 위해 스크린리더가 사용될 때 alt 속성에 있는 텍스트를 읽어준다.
또한, 검색로봇에게도 이미지대신 alt 속성을 읽게 함으로써 SEO에 기여하게 된다.

3. SSL 사용

https는 http 에 SSL을 적용하여 데이터 전송 기능의 보안을 강화한 것이다.
보안을 강화하는 만큼 각종 바이러스 침투에 대비하는 기술들이 추가되어 있으며 동일사이트라면 http로 서비스 하는 것보다, https로 서비스 할 경우 구글 검색엔진에서 전체 점수의 약 1% 정도에 해당하는 랭킹 가산점을 부여한다.

4. 사이트를 모바일 친화적으로 제작(viewport)

구글은 웹 사이트를 모바일 환경을 지원하도록 하는 방법은 반응형 웹 디자인을 권장한다.

반응형 웹 디자인을 사용하는 경우 <meta name="viewport" > 태그를 사용한다.

<meta name="viewport" content="width=device-width, initial-scale=1" />

별도의 URL을 사용하는 경우 <link rel="canonical" > 태그를 사용함으로써 검색엔진에 URL을 알려주는 것도 방법이다.

<link rel="canonical" href="https://www.website.com/main">

다음 링크를 통해 내가 만든 웹 사이트가 모바일 친화적인지를 테스트 해 볼 수가 있다.
https://search.google.com/test/mobile-friendly?hl=ko

5. 적절한 링크 사용

앵커 텍스트란, 홈페이지에 삽입되는 링크 위에 있는 설명 문구를 의미한다.
다음 예시를 보자.

<a href=“http://overflowingscience.site”>과학 블로그 바로가기</a>

앵커 텍스트는 위에서 블로그 바로가기를 말한다.
적절한 앵커 텍스트를 사용하면 사용자와 검색엔진이 연결된 페이지의 내용을 쉽게 이해할 수 있다.

구글의 경우, 앵커 텍스트로 해당 페이지에 키워드가 포함되어 있는지 체크하기 때문에 주요한 키워드를 앵커텍스트로 삽입하면 SEO에 도움이 됩니다.

마무리

위와 같이 구글의 검색 엔진이 어떻게 동작하는지를 알아봤지만,
아래의 구글 SEO 공식 문서를 보면 훨씬 더 방대하게 나열되어 있다.
SEO에 관해 전문적으로 알아가기 위해서는 공식 문서를 보는 것을 추천한다.

네이버: https://searchadvisor.naver.com/guide/seo-basic-intro
구글: https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko

또한, 웹 사이트가 네이버의 검색 엔진에 (간단히) 부합되는지를 알아보기 위한 테스트 사이트도 있다.

https://searchadvisor.naver.com/tools/sitecheck?pcode=naver_pcsearchmktbanner

(참고)
https://library.gabia.com/contents/domain/4359/
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko#who-is-this-guide-for
https://velog.io/@hsecode/%EC%B5%9C%EC%A0%81%ED%99%94-%EA%B2%80%EC%83%89%EC%97%94%EC%A7%84-%EC%B5%9C%EC%A0%81%ED%99%94SEO-%EC%9D%B4%EC%9C%A0%EC%99%80-%EB%B0%A9%EB%B2%95-10%EA%B0%80%EC%A7%80

Hyuk

프론트엔드 개발자

이전 포스트

[Node.js & Algorithm] 해시(Hash)와 솔트(Salt)

다음 포스트