-
seo를 위해 고려할수 있는 사항react 2023. 5. 16. 22:51반응형
seo ?
search engine optimization 으로 검색엔진 최적화를 이야기 한다
이는 곧 사이트가 크롤러에 잘인식되도록 웹페이지를 최적화하여 검색엔진에서 높은 순위로 나타낼수 있도록 하기위함이다.
어떤 작업들이 최적화를 하는 방법일까 ?
크롤러는 웹 페이지의 콘텐츠를 분석하고, 링크 구조를 파악하며, 메타 데이터를 수집하여 검색 결과에 반영한다.
- robots.txt 파일 설정
크롤러는 웹사이트 방문이후 가장먼저 최상단 디렉토리의 robot.txt파일을 확인한다.
robots.txt 파일은 검색 엔진 로봇에게 웹 사이트의 크롤링(인덱싱) 규칙을 알려주는 텍스트 파일이다.
User-agent: * Disallow:위와 같은 파일을 통해 모든 크롤링을 허용해줄수도 있지만 경우에 따라 특정 부분만 크롤링하게 함으로써 크롤링 효율성을 높여줄수 있고 불필요한 부분은 수행하지 않음으로써 특정부분을 강조할수 있다. 아래는 구글/robots.txt 의 일부이다.
# AdsBot User-agent: AdsBot-Google Disallow: /maps/api/js/ Allow: /maps/api/js Disallow: /maps/api/place/js/ Disallow: /maps/api/staticmap Disallow: /maps/api/streetview Sitemap: https://www.google.com/sitemap.xml- sitemap.xml 파일 설정
바로 위 robots.txt 파일 최하단에는 sitemap.xml 파일의 위치를 알려주는 부분이 있다.
크롤러는 다음으로 sitemap.xml 파일을 확인한다.
사이트맵의 역할을 말그대로 사이트의 지도를 이야기한다. 물론 크롤러는 사이트맵이 없어도 사이트를 탐색할수 있다.
이는 마치 미로속에서 지도와 같은 역할을 한다. 우리는 미로에서 오른손의 법칙을 통해 오른손을 벽에 댄채로 쭉 가다보면 결국에는 탈출할수 있다라는 걸 알지만 지도를 가지고 있다면 좀더 효율적으로 미로를 탈출 할수 있게된다. 사이트 맵은 이런 지도의 역할을 한다고 생각하면 된다.
아래는 예시를 위한 구글/sitemap.xml 의 일부이다.
<sitemapindex xmlns="http://www.google.com/schemas/sitemap/0.84"> <sitemap> <loc>https://www.google.com/gmail/sitemap.xml</loc> </sitemap> <sitemap> <loc>https://www.google.com/forms/sitemaps.xml</loc> </sitemap> <sitemap> <loc>https://www.google.com/slides/sitemaps.xml</loc> </sitemap> ... </sitemapindex>이 파일은 검색 엔진 로봇이 웹 페이지를 빠르고 정확하게 크롤링하고 색인화하는 데 도움을 줍니다.
sitemap.xml 파일을 사용하여 SEO를 최적화하는 주요 이점은 다음과 같습니다.
사이트맵 파일을 통해 페이지 색인화, 페이지 중요도에 의한 우선순위, 에러페이지 식별 과 같은 작업을 효율적으로 할수 있게 한다.
(여기서 색인화는 검색엔진이 일종의 캐시를 해놓는 것으로 이해했다)
- 콘텐츠 분석
크롤러는 html 태그를 통해서 콘텐츠를 분석한다. html 구조를 파싱하여 포함된 텍스트, 링크, 이미지와 같은 요소들을 인식하고 이를 통해 콘텐츠를 이해하고 데이터를 수집하게 된다.
그렇기 때문에 client side rendering(CSR)을 사용하는 경우 크롤러는 초기에 비어있는 html로 인식하게 되어 콘텐츠 분석에 어려움이 있어 seo에 불리함이 존재한다. 그래서 nextjs와 같은 ssg(build 시 html 생성), ssr(서버에서 html 생성)을 지원해주는 라이브러리를 사용하는 이유가 된다.
또한 <a>, <img>, <h1>, <h2>, <p>, <span> 과 같은 태그를 우선순위 높게 수집하게 되므로 시맨틱태그를 사용함으로써 구조와 컨텐츠를 잘 이해할수 있도록 해준다.
nextjs의 경우에도 <a> 역할을 하는 Link 컴포넌트를 사용하는 것이 router.push("/abc") 처럼 자바스크립트를 통해 페이지를 이동하는것보다 seo에 좋은 방법이다.
페이지별로 메타데이터(title, descripttion, keyword)를 잘 명시해 주는것도 콘텐츠 분석에 도움이 된다.
<head> <title>페이지 제목 | 사이트</title> <meta name="description" content="웹 페이지에 대한 설명"> <meta name="keywords" content="키워드1, 키워드2, 키워드3"> </head>- 사용자의 좋은경험을 위한 사이트
결국 크롤러가 가장 원하는것은 사용자가 좋은경험을 할수 있는 사이트를 검색시 상위노출 시켜주는 것이다.
그렇기 위해서는 웹사이트의 속도 최적화를 위한 작업들도 seo에 많은 도움이 된다고 볼수있고, 최근과 같은 다양한 기기를 통한 접근이 많은 시대에서는 반응형 사이트 역시 도움이 된다. (구글검색엔진은 이미 모바일을 우선으로 인식하여 색인화 한다고한다)
마무리
- 요약
- robots.txt 파일설정
- sitemap.xml 파일설정
- ssr지원 라이브러리(프레임워크)사용
- 시맨틱 태그 사용
- 페이지별 적절한 메타데이터 사용
- 웹사이트 성능개선(속도)
- 반응형 사이트
- 후기
- 토이프로젝트 이후 ga 적용하면서 느낀점은 나만 보는 사이트라는 점이 였다. 내가 알고 있던것을 점검하고 일부는 사용해보지 않은 스택을 경험하는 용도로 만든 프로젝트였지만 이런 사이트를 필요로 하는 사람이 나말고도 있겠지라는 생각에서 시작했기 때문에 아쉬움이 남았고 그런점이 seo에 대해서 찾아보는 계기가 되었다.
- 아직 위 항목들을 모두 적용시키지는 못했다. robots 파일이나 콘텐츠 분석 같은 경우에는 쉽게 적용이 가능한 부분이였지만 sitemap.xml을 동적으로 생성해서 추가 하고 싶은데 이부분이 잘안되고 있는 중이다. 추후에 위 내용중에서 잘안됬던 부분들은 따로 블로깅을 해볼생각이고 적어둔 사항 이외에도 서치콘솔등록이라던가 몇몇 사항들도 있었는데 도움이 될만한 내용이면 업데이트를 할 생각이다.
- seo에 대해서 ssr 지원하는 라이브러리 사용하면 되는거 아니야? 정도로만 알고 있었는데 좀더 생각해보는 계기가 되었었다.
'react' 카테고리의 다른 글
React. 클래스형 컴포넌트보다 함수형 컴포넌트를 선호하는 이유 (0) 2023.06.29 [error] nextjs api routes vercel 배포시 504에러 (0) 2023.04.28 [error] nextjs Image 관련 (0) 2023.04.16 [react] s3에 여러 이미지 파일 업로드하기 (0) 2023.04.15 [Nextjs] dynamic import 에 대하여 (0) 2023.04.06