-
[Next.js] SEO - 3. Rendering and Ranking공부 2021. 11. 3. 16:12
JavaScript는 웹 개발 생태계의 중요한 부분이다. 과거에는 대부분의 프로그래밍 언어가 모든 콘텐츠를 서버에서 직접 전송했다.
JavaScript와 같은 기술을 통해 브라우저에서 정보를 가져오는 것이 그 어느때보다 대중화 되었다. 이는 대부분의 봇이 서버에서 초기 HTML만 분석하고 브라우저로 로드하기 때문에 검색 엔진과 페이지를 이해하는 능력에 영향을 미쳤다.
Rendering Strategies
1. Static Site Generation (SSG)
Static site generation은 빌드 시 HTML이 생성되는 곳이며, 이 HTML은 각 요청에 사용된다. Static site generation은 사전 렌더링 되기 때문에 페이지 로드에 모든 HTML이 있을 뿐만 아니라 페이지 성능에도 도움이 되므로 SEO를 위한 최고의 렌더링 전략 유형이다. - 이제 SEO와 관련하여 또 다른 순위 요소이다.
2. Server-Side Rendering (SSR)
SSG와 마찬가지로 SSR은 사전 렌더링되며 이는 SEO에도 적합하다. SSG가 빌드 시 생성되는 반면, SSR의 HTML은 요청 시 생성된다. 이는 매우 동적인 페이지가 있는 경우에 유용하다.
3. Incremental Static Regeneration (ISR)
페이지가 매우 많으면 빌드 시 페이지를 모두 생성하는 것은 불가능할 수 있다. Next.js를 사용하면 사이트를 구축한 후 정적 페이지를 만들거나 업데이트 할 수 있다.
ISR은 개발자와 컨텐츠 에디터로 하여금 전체 사이트를 재빌드 할 필요 없이 페이지 기반의 정적 생성을 사용할 수 있게 한다. ISR을 사용하면 수백만 페이지로 확장하면서 정적의 이점을 유지할 수 있다.
4. Client Side Rendering (CSR)
CSR은 개발자가 JavaScript를 사용하여 브라우저에서 웹사이트를 완전히 렌더링할 수 있도록 한다. 초기 페이지 로드 시 JavaScript를 가져오고 브라우저가 모든 것을 컴파일 할 때까지 단일 HTML 파일은 일반적으로 콘텐츠가 거의 또는 전혀 없이 제공된다.
위에서 언급했듯이, 일반적으로 CSR은 최적의 SEO를 위해 권장되지 않는다.
CSR은 데이터가 많은 대시보드, 계정 페이지 또는 검색 엔진 색인에 포함될 필요가 없는 페이지에 적합하다.
Summary
SEO를 위해 가장 중요한 점은 페이지 데이터와 메타 데이터가 JavaScript 없이 페이지 로드 시 사용할 수 있더는 것이다. SSG와 SSR의 경우 가장 좋은 옵션이 될 것이다.
Next.js의 장점 중 하나는 위에서 제시된 각 렌더링 방법을 페이지 단위로 수행할 수 있다는 점이다. 블로그 게시물을 정적으로 생성하고, 고객 계정 대시보드는 CSR로 렌더링하며 SSR로 뉴스 피드를 렌더링 할 수 있다.
What about AMP?
2016년 구글은 웹페이지에 AMP를 사용하여 검색 랭킹 선호도를 주기 시작했다. (AMP는 개발자가 뫄일 장치에서 더 빠르게 로드되는 웹 페이지를 만들 수 있게 해주는 기술이다.)
Core Web Vitals 페이지 환경 업데이트를 통해 구글은 검색 캐러셀에 표시하기 위한 요구 사항으로 AMP 페이지를 삭제했다. 이는 SEO 목적 측면에서 구글이 AMP에 대해 가진 마지막 주요 이점 중 하나이다.
AMP가 도입된 이후로 Next.js와 같은 새로운 기술은 개발자경험(DX)을 희생하지 않고도 웹사이트 경험을 개선할 수 있는 능력이 입증되었다.
Next.js가 AMP 지원을 제공하는 동안 웹 사이트에 이미 훌륭한 Core Web Vitals 점수가 있는 경우, 웹사이트에 AMP 구현을 하는데 따른 비용과 이점을 고려하라.
URL Structure
URL 구조는 SEO 전략에서 중요한 부분이다. 구글이 각 부분에 어떤 가중치가 있는지 공개하지 않았지만, 좋은 URL은 순위 요인이 크든 작든 상관없이 모범 사례로 간주된다.
다음과 같은 몇가지 원칙을 따를 수 있다:
- Semantic: ID나 랜덤 숫자 대신 의미 있는 URL을 사용하는 것이 가장 좋다. 예를 들면, /learn/basics/create-nextjs-app이 /learn/course-1/lesson-1보다 낫다.
- Patterns that are logical and consistent: URL은 페이지 간에 일관된 패턴을 따라야 한다. 예를 들어, 가지고 있는 각 제품에 대해 다른 경로를 사용하는 대신 모든 제품 페이지를 그룹화하는 폴더를 원한다.
- Keyword focused: 구글은 여전히 웹사이트에 포함된 키워드에 시스템의 상당 부분을 기반으로 한다. 페이지의 목적을 쉽게 이해할 수 있도록 URL에 키워드를 사용할 수 있다.
- Not parameter-based: 매개변수를 사용하여 URL을 작성하는 것은 일반적으로 좋지 않다. 대부분의 경우 의미가 없으며 검색 엔진에서 혼동을 일으키고 결과에서 순위를 낮출 수 있다.
How are Routes Defined in Next.js?
Next.js는 페이지 개념을 기반으로 구축된 파일 시스템 라우팅을 사용한다. 파일이 pages 디렉토리에 추가되면 자동으로 경로로 사용할 수 있다. pages 디렉토리 안에 있는 파일과 폴더는 가장 일반적인 패턴을 정의하는 데 사용할 수 있다.
몇 가지 간단한 URL와 이를 Next.js 라우터에 추가하는 방법을 살펴보자:
- Homepage: https://www.example.com → pages/index.js
- Listings: https://www.example.com/products → pages/products.js or pages/products/index.js
- Detail: https://www.example.com/products/product → pages/products/product.js
블로그 또는 전자 상거래 사이트의 경우, 제품 ID 또는 블로그 이름을 URL의 슬러그로 사용하고 싶을것이다. 이것을 동적 라우팅이라 한다.
- Product:https://www.example.com/products/nextjs-shirt → pages/products/[product].js
- Blog:https://www.example.com/blog/seo-in-nextjs → pages/blog/[blog-name].js
동적 라우팅을 사용하기 위해서, 제품 또는 블로그 하위 폴더 내의 페이지 이름에 대괄호를 추가한다.
다음은 SSR를 사용하여 최적화된 페이지의 예이다:
// pages/blog/[slug].js import Head from 'next/head' function BlogPost({ blog }) { return ( <div> <Head> <title>{blog.title} | My Site</title> </Head> <div> <h1>{blog.title}</h1> <p>{blog.text}</p> </div> </div> ) } export async function getServerSideProps({ query }) { const res = await fetch(`https://www.example.com/api/blog/${query.slug}`) const data = await res.json() return { props: { blog: data } } } export default BlogPost
Metadata
메타데이터는 웹사이트 콘텐츠의 요약이며 사이트에 제목, 설명 및 이미지를 첨부하는데 사용된다.
Title
title 태그는 두 가지 주요 이유로 가장 중요한 SEO 요소 중 하나이다:
- 사용자가 검색 결과에서 클릭하여 웹사이트에 들어갈 때 보게 되는 것이다.
- 구글이 해당 페이지가 무엇에 대한 것인지 이해하는데 사용되는 중요한 요소 중 하나이다. 타이틀에 키워드를 사용하는 것은 일반적으로 검색 엔진에서 순위 향상을 이끌기 때문에 권장된다.
예:
<title>iPhone 12 XS Max For Sale in Colorado - Big Discounts | Apple</title>이 페이지에는 모든 주요 키워드가 포함되어 있으며, 할인이라는 명확한 가치 제안을 보여주는 사용자에게 매력적이다.
Description
description 메타 태그는 또 다른 중요한 SEO 요소이지만 title 태그보다는 덜 중요하다. 구글에 따르면, 이 요소는 순위 지정을 위해 고려되지는 않지만, 검색 결과의 클릭률에 영향을 줄 수 있다.
description 메타 태그를 사용하여 제목의 정보를 보완하자. 제목에 맞지 않는 키워드가 있는 경우 여기에 더 많은 키워드를 입력한다. 이러한 키워드는 사용자의 검색에 모한된 경우 굵게 표시된다.
HTML에서 description 메타 태그 예:
<meta name="description" content="Check out iPhone 12 XR Pro and iPhone 12 Pro Max. Visit your local store and for expert advice." />검색 엔진 결과 페이지의 일부일 때, 페이지에 표시되는 방식은 다음과 같다:
Next.js에서 우리는 Head 컨포넌트에서 title과 description을 세팅했다. Next.js에서 메타 title과 description 태그틑 다음과 같이 표시된다:
import Head from 'next/head' function IndexPage() { return ( <div> <Head> <title> iPhone 12 XS Max For Sale in Colorado - Big Discounts | Apple </title> <meta name="description" content="Check out iPhone 12 XR Pro and iPhone 12 Pro Max. Visit your local store and for expert advice." key="desc" /> </Head> <h1>iPhones for Sale</h1> <p>insert a list of iPhones for sale.</p> </div> ) } export default IndexPageHead 컴포넌트는 앱의 모든 페이지에서 페이지 콘텐츠에 대한 정보를 설명하거나 제공하는데 사용할 수 있다.
Open Graph
Facebook에서 개발한 Open Graph 프로토콜은 주어진 웹 페이지에서 메타 데이터가 사용되는 방식을 표준화한다. 원하는 만큼 정보를 제공할 수 있지만, 모든 open graph 조각은 연결된 사이트를 나타내기위해 서로 맞춘다.
다른 소셜 미디어 회사(Pinterest, Twitter, LinkedIn 등)도 URL을 공유할 때,리치 카드를 표시하기 위해 Open Graph를 사용할 수 있다.
이러한 Open Graph 태그는 SEO 관련 태그와 많은 유사점이 있지만, 검색 엔진 순위에 아무런 이점을 제공하지 않는다. 하지만 사람들이 소셜 미디어나 개인 메세지 도구(WhatsApp 또는 Telegram 등)에서 콘텐츠를 공유할 수 있으므로 여전히 권장된다.
Head 컴포넌트 내부의 메타 태그에 property 속성을 정의하여 Open Graph 태그를 추가할 수 있다. 예:
import Head from 'next/head' function IndexPage() { return ( <div> <Head> <title>Cool Title</title> <meta name="description" content="Checkout our cool page" key="desc" /> <meta property="og:title" content="Social Title for Cool Page" /> <meta property="og:description" content="And a social description for our cool page" /> <meta property="og:image" content="https://example.com/images/cool-page.jpg" /> </Head> <h1>Cool Page</h1> <p>This is a cool page. It has lots of cool content!</p> </div> ) } export default IndexPage페이지 내용을 나타내는 그림과 함께 description과 title을 제공하는 공유 가능한 링크를 갖는 것은 SEO 순위에 직접적인 영향을 미치진 않지만, 간접적으로 링크의 클릭 가능성을 증가시켜 궁극적으로 더 많은 방문자들을 사이트로 이끌 것이다.
Structured Data and JSON-LD
구조화된 데이터는 검색 엔진이 페이지를 쉽게 이애할 수 있도록 한다. 수년에 걸쳐 어려 어휘가 있었지만 현재 주요 단어는 schema.org 이다.
웹사이트에 따르면, schema.org는 "인터넷, 웹 페이지, 이메일 메시지 등의 구조화된 데이터에대한 스키마를 생성, 유지 및 홍보하는 임무를 가진 공동 커뮤니티 활동"이다.
Schema.org의 어휘는 RDFa, Microdata 및 JSON-LD를 비롯한 다양한 인코딩과 함께 사용할 수 있다.
다른 검색 엔진들은 schema.org 내의 다른 어휘들을 적용할 수 있으며, 검색 엔진은 웹사이트의 어휘를 설명하는 모든 사용 사례를 다루지 않는다. 따라서 각 경우 어떤 어휘가 허용되는지 확인해야 한다.
On Page SEO
높은 수준에서 페이지 SEO는 페이지의 전체 구조를 구성하는 제목과 링크를 나타낸다. 제목은 문서의 중요성을 나타내며 링크는 웹을 함께 연결한다.
Headings and H1
제목은 사용자가 페이지의 구조와 다음 단락에서 읽을 내용을 이해하는 데 도움이 된다. 또한 페이지의 어느 부분이 가장 중요한지 이해하는 검색 엔진의 작업을 용이하게 한다.
제목은 1-6으로 진행되며 제목 1이 가장 중요하다고 생각되는 경향이 있다. 각 페이지에 H1 제목 태그를 사용하는 것이 좋다. H1은 페이지의 내용을 나타내야 하며 title 태그와 유사해야 한다.
Internal Links
인터넷은 링크로 연결된다. 링크가 없다면 인터넷은 존재하지 않았을 것이다. 더 많은 링크를 수신하는 웹사이트는 사용자가 더 신뢰하는 웹 사이트로 나타나는 경향이 있다.
구글은 PageRank 알고리즘으로 이 원칙을 시작했다.
상위수준에서 PageRank 알고리즘은 데이터베이스의 모든 링크를 통과하고 수신하는 링크 수(quantity)와 도메인(quality)에 따라 도메인 점수를 매기는 알고리즘이다. 스팸 웹이사트의 대부분은 거의 가치가 없다.
그러나 전국 언론 웹사이트의 링크는 검색 엔진에 매우 유용하다. 이것이 리크가 중요한 이유이며 항상 페이지 내부와 외부 웹사이트 모두에 링크를 포함해야 한다. PageRank 계산에 링크를 사용하려면 항상 href를 사용해야 한다.
next/link
Next.js는 경로 간 클라이언트 측 전환을 가능하게 하는 링크 구성 요소를 제공한다. 간단한 사례는 다음과 같다:
function NavLink({ href, name }) { return ( <Link href={href}> <a>{name}</a> </Link> ) } export default NavLinkhref prop은 필수이며 SEO에 필수적인 앵커 태그에 링크를 올바르게 추가한다. 구글이 페이지를 크롤링할 때 JavaScript에 의존하지 않고 이 링크를 크롤링하고 따라간다.
그러나 만약 Link의 child가 a태그를 감싸는 사용자 컴포넌트라면, passHref를 Link에 추가해야 한다. styled-components와 같은 라이브러리를 사용하고 있는 경우에도 필요하다. passHref가 없다면 a태그는 href 속성을 가지지 않을 것이고, 이는 사이트 SEO에 영향을 준다.
passHref 사용법:
import Link from 'next/link' import styled from 'styled-components' // This creates a custom component that wraps an <a> tag const RedLink = styled.a` color: red; ` function NavLink({ href, name }) { // Must add passHref to Link return ( <Link href={href} passHref> <RedLink>{name}</RedLink> </Link> ) } export default NavLinkESLint를 사용하는 경우 Next.js에는 이러한 일이 발생하지 않도록 보호하는 규칙이 있다.
'공부' 카테고리의 다른 글
[Next.js] SEO - 5. Improving your Core Web Vitals (0) 2021.11.08 [Next.js] SEO - 4. Web Performance & Core Web Vitals (0) 2021.11.05 [Next.js] SEO - 2. Crawling and Indexing (0) 2021.11.02 [Next.js] SEO - 1. Introduction to SEO (0) 2021.11.01 [Next.js] 7. Deploying Your Next.js App (0) 2021.10.29