프론트엔드 측면에서 웹 사이트 접근성 향상 시키기(Next13)

Mincho·2023년 11월 6일

[NextJs]

목록 보기

12/12

기존에 제가 진행했던 프로젝트는 아직 배포되어 운영중이였고 웹 사이트 특성상 서비스 지향적(B-to-C)느낌이 강하여 사용자들이 쉽게 웹사이트에 접근 할 수 있고 노출이 되어야 할 필요성이 있습니다. 따라서 SEO(검색엔진 최적화)를 신경써야 했습니다. 구글같은 경우 웹 크롤링 봇이 웹페이지의 콘텐츠들을 복사하여 그 정보들을 수집하여 검색엔진으로 가져오게 됩니다. 그러므로 우리는 웹사이트를 노출시키기 위해 SEO측면을 잘 활용해야 합니다. 이에 따라 손 쉽게 검색 노출을 시킬 수 있는 라이브러리나 도구들도 많이 있습니다.

LightHouse를 통한 검색엔진 노출 최적화(meatData)

LightHouse로 웹페이지 최적화하기
과거에도 정리를 해두었지만 Chrome에서 제공하는 lighthouse를 통해 SEO성능점수를 비롯해 여러가지를 측정하고 문제를 진단받을 수 있습니다. 위의 그림처럼 현재 페이지의 SEO성능 점수를 확인할 수 있고 문제점을 진단받고 피드백을 주는 것을 확인할 수 있습니다. 그러므로 meta태그를 설정하고 문서의 title과 description을 주었습니다.

React같은 경우는 기본적으로 index.html파일에서 기본적으로 setting이 가능하기도 하지만 React Helmet라이브러리의 도움을 받아 좀 더 손쉽게 커스텀할 수 있습니다.

저 같은 경우 Next13버전에서 layout상단에 Meatdata를 설정하여 모든 페이지에 MetaData를 적용했습니다.

Open Graph태그 사용하기

친구나 지인들에게 웹사이트 링크를 공유할 때 이와같이 title과 description, 또 이와관련된 img가 함께 보여지는 경우를 보신적이 많을 겁니다. 저도 이와 같은 설정을 하지 않았을 때 미리보기 화면이 너무 허접했던 경험이 있었습니다. 이를 위해 Open Graph설정을 해주어야 합니다.

Open Graph란 인터넷 프로토콜의 한 종류로 웹페이지에 대한 정보를 담고 있는 메타데이터의 사용방식을 표준화해서 미리보기 형태로 제공해주는 기능입니다. 특히 요즘같이 소셜미디어가 발전함에 따라 더 많이 활용되고 있습니다. 직접적으로 Open Graph가 SEO측면을 향상시켜주는 것은 아니지만, 링크를 받은 사용자로 하게끔 흥미를 유발하고 웹페이지를 클릭하게 끔 유도를 해 접근성을 향상시켜주는 수단입니다.

<meta property="og:title" content="title 내용" />
<meta property="og:url" content="url/" />
<meta property="og:image" content="Contents 이미지" />
<meta
      property="og:description"
      content="콘텐츠 설명"
/>

React에서는 meta태그에 og네이밍을 붙어 컨텐츠 내용을 보여줍니다.

Next에서는 openGraph속성을 이용하여 나타냅니다.

+++추가 내용 dynamic metaData

추가로 저는 Next에서 제공하는 generateMeta로 동적으로 페이지마다 metadata를 설정하였습니다.

sever side에서 data를 가져와 그 데이터를 기반으로 meta데이터에 넣어주었습니다. 다음과 같이 searchParams에 따른 데이터를 기반으로 img와 description을 동적으로 넣어주었습니다.

결과적으로 뒤에 params에 따라 동적으로 metadata가 설정된 것을 확인 할 수 있었습니다.

Google Search Console 및 네이버 서치어드바이저 등록

전 세계적으로 사용량이 많은 구글과 우리나라 검색포털 1위인 네이버에 URL을 등록하고 여러가지 설정을 통해 SEO를 개선할 수 있습니다.

Google Search Console

다음과 같이 Google Search Console에 접속하게 되면 등록하고 싶은 도메인을 인증받을 수 있습니다.

기본적으로 권장하는 방법에는 html파일을추가하는 방식입니다. 이외에도 goole에서주는 meta태그나 도메인 공급업체에 추가적인 파일 제공 등을 통해 도메인을 인증하여 등록할 수 있습니다.

저의 경우에는 meta태그를 발급받아 meta태그를 추가해주었고 이를 통해 도메인 등록을 할수 있었습니다.

네이버 서치어드바이저

네이버도 등록하는 방식은 똑같습니다. 단지, html파일등록을 통한 인증과 meta태그를 통한 인증만 있었습니다. google과 마찬가지로 meta태그를 통해 등록해주었습니다.

Robot / Sitemap 생성하기

Robot

검색엔진 봇들이 웹 사이트에 접근할 때 가장 먼저 도달하는 곳이 Robot.txt파일입니다.

위의 사진은 toss 홈페이지의 robot.txt파일입니다. Allow인 경로는 웹 사이트의 콘텐츠를 수집하도록 허용하며 민감한 정보가 있을 경우 Disallow를 통해 접근을 제한할 수 있습니다.

Robot.txt파일을 설정함으로써 SEO에 영향을 주기도 합니다. 웹사이트 내에 중복되는 내용이 있다면 불필요한 정보만 반복적으로 반영되기 때문에 최적화에 부정적인 영향을 주기 때문에 중복되는 내용이 반영되지 않도록 Robot.txt에 명시해 주는 것이 좋습니다. 바로 다음에 알아볼 사이트맵에 대한 정보를 제공하고 있기 때문에 도움이 됩니다.

User-agent : 특정 봇들에게만 크롤링 허용
Disallow : 특정 경로의 하위 경로까지 크롤링 제한 (/idol일 경우 /idol경로의 하위 경로까지 제한)
Allow : 특정 경로 크롤링 허용

sitemap

사이트맵은 웹페이지의 목록을 나열한 파일로 어떤 콘텐츠에 대한 목차를 제공하는 느낌으로 보시면 이해가 빠릅니다. 이 때문에 크롤링 봇이 쉽게 발견되지 않는 웹페이지도 문제없이 크롤링되고 색인될 수 있기 때문에 큰 도움을 받을 수 있습니다. 보통 xml형식으로 파일을 작성하며 sitempas.org 프로토콜에 따라 작성됩니다.