SEO(검색 엔진 최적화)를 위한 종류별 세팅
이번에는 NextJs을 사용하는 이유 중 하나인 SEO에 대해 더 깊이 기록하고자 4편을 쓰게 되었습니다.
NextJs의 SSR이라는 특징으로 SEO 엔진에 최적화되었다는 것은 사실이지만 여기서 끝나는 것이 아니라 SEO 엔진에 최적화를 위해 추가로 설정해야 하는 개발 및 환경 세팅이 존재합니다.
NextJs만 쓰면 모든게 해결되면 좋겠지만 추가적인 최적화 세팅 및 개발이 없다면 NextJs을 사용하는 가치를 최대한으로 끌어올릴 수 없으니 필수라고 생각합니다.
현재 실제로 제가 서비스 운영 중인 MyVenus 인도네시아 뷰티 플랫폼의 NextJs 프로젝트로 구축한 서비스 메인 웹 페이지를 통해 예시 또한 보여줄 예정입니다.
MyVenus - Aplikasi Perawatan Kecantikan Terlengkap & Terpecaya #1 di Indonesia
Bergabunglah dengan komunitas kami untuk menemukan solusi dari berbagai masalah seputar dunia kecantikan, melihat real review hingga mencari tahu segala hal yang berhubungan dengan treatment kecantikan maupun operasi plastik!
myvenus.io
SEO란
검색 엔진에서 상위권에 노출될 수 있도록 웹 사이트를 최적화하는 작업입니다.
IT 서비스를 운영한다면 이 최적화 작업은 매우 중요합니다. 검색 엔진에 최적화되어 상위권에 노출되어야 서비스는 더 활성화되고 오가닉 한 유저도 모을 수 있으며 사업의 확장성을 더욱더 시너지를 넣을 수 있기 때문입니다.
사실 개발자가 할 수 있는 최선의 서비스 마케팅이라고 생각합니다.
대표적으로 SEO 엔진은 Google이 있습니다. 대한민국에는 Naver도 추가할 수 있겠습니다. 이번 설명에서는 전세계적으로 사용하고 있는 Google을 예를 들어 설명하겠습니다.
대부분의 검색 사이트의 엔진들은 비슷하게 작동하니 통합해서 이해하시면 좋을거 같습니다.
일반적인 SEO 엔진 프로세스는 아래와 같습니다.
(NextJs 공식 Docs 참고: https://nextjs.org/learn/seo/introduction-to-seo/webcrawlers)
1. URL 찾기 : Google은 Google Search Console , 웹사이트 간 링크, XML 사이트맵 등 다양한 위치에서 URL을 제공합니다.
2. 크롤링 대기열에 추가 : 이 URL은 Googlebot이 처리할 수 있도록 크롤링 대기열에 추가됩니다. 크롤링 대기열의 URL은 일반적으로 몇 초 동안 지속되지만 경우에 따라 최대 며칠이 걸릴 수 있습니다. 특히 페이지를 렌더링 하거나 색인을 생성해야 하거나 URL이 이미 색인을 생성한 경우 새로 고쳐야 하는 경우에는 더욱 그렇습니다. 그러면 페이지가 렌더링 대기열로 들어갑니다.
3. HTTP 요청 : 크롤러는 헤더를 가져오기 위해 HTTP 요청을 하고 반환된 상태 코드에 따라 작동합니다.200- HTML을 크롤링하고 구문 분석합니다. 30X- 리디렉션을 따릅니다. 40X- 오류를 기록하고 HTML을 로드하지 않습니다. 50X- 나중에 다시 돌아와서 상태 코드가 변경되었는지 확인할 수도 있습니다.
4. 렌더링 대기열 : 검색 시스템의 다양한 서비스와 구성 요소가 HTML을 처리하고 콘텐츠를 구문 분석합니다. 페이지에 JavaScript 클라이언트 측 기반 콘텐츠가 있는 경우 URL이 렌더링 대기열에 추가될 수 있습니다. 렌더링 대기열은 JavaScript를 렌더링 하는 데 더 많은 리소스를 사용해야 하기 때문에 Google에 비용이 더 많이 듭니다. 따라서 렌더링 된 URL은 인터넷의 전체 페이지에 비해 더 작은 비율입니다. 일부 다른 검색 엔진은 Google과 동일한 렌더링 용량을 갖고 있지 않을 수 있으며, 여기서 Next.js가 렌더링 전략에 도움을 줄 수 있습니다.
5. 색인 생성 준비 완료 : 모든 기준이 충족되면 페이지의 색인이 생성되어 검색결과에 표시될 수 있습니다.
마지막 단계에서 검색 엔진은 사용자에게 의미 있는 결과 순으로 사용자에게 정보를 보여주는데요, 이 과정에서 개발 및 세팅을 통해 콘텐츠가 더 상위에 노출될 수 있도록 하는 일련의 작업이 SEO라고 말 할 수 있습니다.
미국 온라인 마케팅 회사 Semrush에 따르면, 아래와 같이 SEO을 세 가지로 분류될 수 있습니다.
온 페이지(On-Page) SEO: 웹 사이트의 콘텐츠 구성 요소를 개선
테크니컬(Technical) SEO: 웹 사이트를 검색 엔진이 크롤링하고 색인을 생성하기까지의 과정을 개선
오프 페이지(Off-Page) SEO: 웹 사이트의 외부 평판을 늘리고 개선
개발자가 할 수 있는 범위는 온 페이지(On-Page), 테크니컬(Technical)입니다.
이 두 종류의 SEO 관련된 세팅 및 개발들을 기록하고자 합니다.
SEO 최적화 종류들과 세팅
콘텐츠 제작 / 내용
사실 SEO의 기술적인 세팅이 완벽하다고 해도 SEO 엔진한테 검색을 최적화해줄 콘텐츠와 내용이 필요한 것은 사실입니다.
만약 서비스의 주제가 뷰티/시술/성형에 관련된 것이라면 SEO 엔진에게 뷰티/시술/성형에 관련된 키워드, 내용, 콘텐츠를 잘 구성하고 표시해 줘야 SEO 엔진이 이를 가져가 유저들에게 검색 노출을 할 수 있습니다.
이미 구글에서는 좋은 콘텐츠에 대한 가이드도 제시해주고 있습니다.
유용하고 신뢰할 수 있는 사용자 중심 콘텐츠 만들기 | Google 검색 센터 | 문서 | Google for
Google의 순위 시스템은 사용자에게 도움이 되도록 작성되었으며 유용하고 신뢰할 수 있는 정보를 제공하도록 설계되었습니다. 자체 평가 질문을 사용해 내 콘텐츠를 평가하는 방법을 알아보세
developers.google.com
요약하자면 아래와 같은 특징들이 중요합니다.
경험(Experience): 콘텐츠 제작자가 해당 주제에 대해 얼마나 직접적인 경험을 가지고 있는지
전문성(Expertise): 콘텐츠 제작자가 해당 주제를 이해하는데 필요한 지식이나 기술을 가지고 있는지
권위(Authoritativeness): 콘텐츠 제작가 해당 주제에 대한 출처로 얼마나 저명한지
신뢰성(Trust): 위 모든 것들을 종합하여 해당 주제의 콘텐츠를 얼마나 신뢰할 수 있는지
즉, 내용이 특별하고, 전문성이 있으며, 독창적이면 더 좋은 시너지를 내고 SEO와의 조합으로 인하여 더 좋은 성과를 낼 수 있습니다.
개발자는 운영/기획팀으로부터 받은 내용, 콘텐츠들을 잘 표시 되도록만 하면 될 거 같습니다.
Title 태그
<title>MyVenus - My Beauty Assistant</title>
<title> 태그는 웹 페이지의 제목을 나타냅니다. 브라우저 탭에도 나타나지만 검색 엔진은 이 태그를 통해 웹 페이지의 주제를 파악하기도 합니다.
또한 검색 결과에 표시되는 타이틀로도 사용될 수 있으므로 아주 중요합니다.
저는 개발을 할 때 프로젝트 내에서 <title> 태그는 단 하나만 사용하고, <h1> 태그 또한 하나의 게시글 혹은 아티클에서 가장 최상위 제목에서 사용하며 그 하위 제목은 <h2> 태그를 사용하도록 합니다. 중요한 내용인 제목을 잘 노출시키기 위한 전략입니다.
meta 태그
<meta
name="title"
content="MyVenus - Aplikasi Perawatan Kecantikan Terlengkap & Terpecaya #1 di Indonesia"
/>
<meta
name="description"
content="Bergabunglah dengan komunitas kami untuk menemukan solusi dari berbagai masalah seputar dunia kecantikan, melihat real review hingga mencari tahu segala hal yang berhubungan dengan treatment kecantikan maupun operasi plastik!"
/>
<meta name="author" content="Jinseok" />
<meta name="keywords" content="perawatan kecantikan, asisten kecantikan, perawatan diskon, pesan perawatan, MyVenus" />메타 태그를 통해 각 포스트의 부가적인 정보를 제공해야 합니다.
메타 태그는 <head> 태그 내부에 위치하며, <title> 태그와 마찬가지로 검색 엔진이 웹 페이지의 정보를 파악하는 데에 사용됩니다.
보통 이를 이용해 콘텐츠에 대한 설명, 키워드, 저자, 발행시간 등의 정보를 정의합니다.
OG 태그
<meta
property="og:title"
content="MyVenus - My Beauty Assistant"
/>
<meta
property="og:description"
content="Bergabunglah dengan komunitas kami untuk menemukan solusi dari berbagai masalah seputar dunia kecantikan, melihat real review hingga mencari tahu segala hal yang berhubungan dengan treatment kecantikan maupun operasi plastik!"
/>
<meta
property="og:image"
content={images.imgMyVenusThumbnail}
/>
<meta
property="og:url"
content="https://myvenus.io"
/>
<meta property="og:site_name" content="MyVenus - My Beauty Assistant" />
<meta property="og:type" content="website" />OG(Open Graph) 태그도 메타 태그의 일종이지만 보통 SNS나 메신저에서 웹 페이지 링크가 공유될 때 나타낼 정보를 표현하는 데 사용됩니다.
미리 보기의 유무가 링크 클릭률에 매우 직접적인 영향을 주기 때문에 매우 중요한 설정이라고 생각 합니다.
일반적으로 링크 공유 시 나타나는 미리 보기 정보가 여기에 해당합니다. 현재 제가 서비스 운영 중인 MyVenus도 NextJs 프로젝트 내에서 OG 태그를 통해 미리 보기 공유하기를 구현하였습니다.
[id].tsx
export const getServerSideProps: GetServerSideProps = async () => {
const res = await onGetReviewDetail(Number(params?.id));
// Seo og meta 태그
const url = `${process.env.NEXT_PUBLIC_DOMAIN_URL}/review/${res?.data?.id}`;
const SeoTitle = res?.data?.product?.name + ' | MyVenus - Beauty Assistant';
const SeoDscription =
res?.data?.text_content?.length > 160
? res?.data?.text_content.substring(0, 160)?.split('\n')?.join('') + '...'
: res?.data?.text_content;
const SeoImage =
res?.data?.imgs?.length > 0
? `https://.../files/get/${res?.data?.imgs?.[0]}`
: images.imgMyVenusThumbnail;
return {
props: {
language,
openGraphData: [
{
property: 'og:image',
content: SeoImage,
key: 'ogimage',
},
{
property: 'og:url',
content: url,
key: 'ogurl',
},
{
property: 'og:title',
content: SeoTitle,
key: 'ogtitle',
},
{
property: 'og:description',
content: SeoDscription,
key: 'ogdesc',
},
...
],
},
};
};제가 NextJs에서 OG 태그를 구현한 방법은 각자 가지고 있는 데이터가 다른 페이지별로 이 공유하기 링크의 미리 보기 내용과 이미지를 다르게 동적으로 표현해야 했기에 페이지별로 getServerSideProps 메서드 안에서 불러온 상세 데이터를 이용하여 OG 태그에 입력되어야 하는 데이터를 파싱 하여 바인딩해주었습니다.
아래와 같이 최상단 _app 파일에서 getServerSideProps에서 불러온 props 데이터를 가져와 NextJs에서 제공하는 Head 태그 안에 OG 태그들을 뿌려주었습니다.
_app.tsx
import Head from 'next/head';
const MyApp = ({ Component, ...rest }: AppPropsWithLayout) => {
const { store, props } = wrapper.useWrappedStore(rest); // Redux Setting
const { openGraphData = [] } = props?.pageProps;
...
return (
<>
<Head>
<title>MyVenus - My Beauty Assistant</title>
//! 서버사이드에서 들어온 og meta 데이터 태그 바인딩
{openGraphData.map((og: OG) => (
<meta {...og} />
))}
</Head>
...
)
export default MyApp;
위와 같이 구현한 이유로는 상세 페이지별로 next/head을 사용하여 동적인 메타 태그 설정을 하고 싶었는데 최상위 _app.tsx의 next/head안에 있는 meta 태그에 덮어 씌워지는 이슈가 있어 서칭을 통해 아래 깃허브 커뮤니티의 답변들을 참고하였습니다.
next/head <meta> tags for pages overriding default _app.js <meta> tags are rendered in the browser but not visible to facebook
Verify canary release I verified that the issue exists in Next.js canary release Provide environment information sorry this is not working. i am running nextjs 12 node 16.12.1 yarn 1.22.5 What brow...
github.com
Semantic 태그
<html>
<body>
<nav></nav>
<section>
<article></article>
</section>
<aside></aside>
<footer></footer>
</body>
</html>
시맨틱 태그(semantic tag), 즉 의미 있는 태그를 사용하면 검색 엔진이 웹 페이지의 구조를 더 잘 이해할 수 있다고 하는데, 사실 이것이 SEO에 미치는 효과는 미미한 수준입니다.
이를 준수하는 것은 좋지만, 시맨틱 태그 개선이 이루어졌다고 해서 똑같은 포스트가 하루아침에 갑자기 검색 결과 상위권에 노출된다거나 그런 효과는 없습니다.
하지만 그중에서도 그나마 챙겨 볼 만한 것이 있다면, 제목 태그(<h1> ~ <h6>)와 하이퍼링크(<a>), 이미지 크기가 적절하게 조정된 이미지 태그(<img>) 정도를 꼽을 수 있을 것 같습니다. 이 부분은 이하에서 설명할 라이트하우스 점수와도 연관이 있기 때문입니다.
제목 태그 중에서도 <h1>의 경우에는 <title> 태그 다음으로 본문을 대표하는 제목이기 때문에 페이지 당 하나를 넣는 것이 좋습니다. 그리고 본문에서 제목을 사용할 때는 숫자 순으로 순서를 잘 지키는 것이 필요합니다.
schema.org
Google, Microsoft, Yahoo 및 Yandex와 같은 세계 유명 검색엔진들이 모여서 구조화된 데이터에 대한 스키마를 생성, 유지 관리하기 위해 schema.org를 설립하였습니다.
쉽게 말해서 데이터 작업을 할 때 우리 모두 이러이러한 언어 형식을 사용하자고 약속을 한 것입니다.
구글, 빙 등의 검색엔진들은 유저들이 원하는 검색결과를 쉽게 얻을 수 있도록 schema.org markup을 활용하고 있습니다.
예시)
글 제목 마크업
<h1 itemprop="headline">글 제목</h1>
글 내용 마크업
<div itemprop="articleBody">
<p>글 내용</p>
</div>
글 이미지 마크업
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img src="게시글 이미지 URL" itemprop="url">
</div>
아래의 공식 Docs 사이트를 참고하면 더 좋은 구조를 파악 할 수 있습니다.
Documentation - schema.org
Documentation Here is some of the documentation available on this site: Site Info Schema Info Extensions Additional Resources Since April 2015, the W3C Schema.org Community Group is the main forum for schema collaboration, and provides the public-schemaorg
schema.org
Sitemap / robots.txt 제공하기
사이트맵(sitemap) 은 웹 사이트의 구조를 검색 엔진에 알려주는 역할을 하는 파일입니다.
보통 XML 형식으로 작성되며, 웹 사이트의 모든 페이지의 URL을 포함하고 있습니다. 이를 통해 검색 엔진은 웹 사이트의 구조를 더 잘 이해할 수 있고, 크롤링 시간을 단축시킬 수 있습니다.
robots.txt는 현재 웹 사이트에서 크롤링을 허용 또는 허용하지 않을 페이지들을 크롤러에게 알려주는 역할을 하는 텍스트 파일입니다.
robots.txt가 없다고 해서 크롤링이 불가능한 것은 아니지만, 크롤러가 웹 사이트의 구조를 더 잘 이해할 수 있도록 도와주는 역할을 하므로 제공하는 것이 좋습니다.
NextJs 프로젝트에서 sitemap 및 robots.txt을 설정하기 위해서는 따로 개발적인 설정이 필요합니다.
next-sitemap
Sitemap generator for next.js. Latest version: 4.2.3, last published: 15 days ago. Start using next-sitemap in your project by running `npm i next-sitemap`. There are 28 other projects in the npm registry using next-sitemap.
www.npmjs.com
꽤 많은 설정이 필요하기 때문에 서칭을 통해 더 자세히 알아보시면 좋겠습니다. 정적, 동적 sitemap을 추가하고 각각 세팅이 다르니 할 수 있으니 참고 바랍니다.
구글 서치 콘솔 등록
구글 서치 콘솔은 구글의 검색 결과에 내 콘텐츠를 노출시킬 수 있도록 해주고 검색 결과와 관련된 통계 정보를 확인할 수 있게 해주는 서비스입니다.
Google Search Console
Search Console 도구와 보고서를 사용하면 사이트의 검색 트래픽 및 실적을 측정하고, 문제를 해결하며, Google 검색결과에서 사이트가 돋보이게 할 수 있습니다.
search.google.com
초기 웹 서비스는 자연 검색만으로는 검색 결과에 노출되기가 매우 어려우니, 구글 서치 콘솔을 통해 사이트맵(또는 RSS)을 등록하여 검색 결과에 노출될 수 있도록 해주는 과정이 반드시 필요합니다.
구글 서치 콘솔 sitemap에 등록할 url을 등록하면 며칠 후 등록에 성공했다는 표식을 확인할 수 있습니다.
이 외에도 서치 콘솔에서는 검색 키워드, 페이지 경험 측정, 모바일 사용 편의성 등 다양한 항목에서의 평가 결과를 제공하고 있으므로 여기에서 힌트를 얻어 개선점을 찾아보는 것 역시 SEO에 도움이 될 것입니다.
Page Speed Insight SEO 측정
PageSpeed Insights
올바른 URL을 입력하세요.
pagespeed.web.dev
구글에서 제공하는 웹 사이트의 성능을 측정하는 도구입니다. 보통 웹 사이트에 직접 들어가 크롬의 개발자 도구 탭에서 측정할 수도 있고, 구글이 운영하는 PageSpeed Insights 페이지에서 URL을 입력하는 방식으로도 확인할 수 있습니다.
사실 라이트하우스 자체가 SEO를 위해 만들어졌다기보다는 웹 사이트의 성능과 사용자 경험에 영향을 미치는 요소들을 측정하여 개선할 수 있도록 돕는 도구이지만 이 성능 개선 자체가 SEO에도 좋은 영향을 줍니다.
구글은 검색 결과에 노출되는 웹 페이지의 성능도 고려하기 때문입니다.
마무리하며...
NextJs의 SSR의 SEO 최적화뿐만 아니라 더 나아가 여러 SEO 최적화 종류들을 살펴보았는데 아직 서비스 초기라 더 명확한 데이터가 아니지만 검색 엔진 최적화를 위한 개발과 서비스 운영을 해보고 이렇게 다시 복습할 겸 정리하게 되어 매우 뿌듯한 것 같습니다.
더 좋은 서비스의 발전을 위해 더 깊이 있는 기술과 개발 적용을 진행할 예정입니다.
감사합니다.
재그지그님의 SEO 블로그글을 대거 참고하였습니다.
https://wormwlrm.github.io/2023/05/07/SEO-for-Technical-Blog.html
'프로그래밍 개발 > NextJs' 카테고리의 다른 글
| NextJs - 3편: NextJs에서의 서버 컴포넌트 RSC(React Server Component) (0) | 2023.09.14 |
|---|---|
| NextJs - 2편: NextJs 버젼 12에서 13으로 넘어오면서 (0) | 2023.09.11 |
| NextJs - 1편: NextJs 시작을 위한 기본 이론 그리고 프로젝트 생성하기 (0) | 2023.09.08 |
댓글