Next.js에서 SEO를 개선하는 방법
9091 단어 frontendjavascriptnextjs
먼저 Next.js 앱을 만들어야 합니다. Next.js를 처음 사용하는 경우 이 게시물을 따라 Next.js 애플리케이션 스캐폴딩을 생성하십시오.
당신은 여기 있습니다. 이미 Next.js 스켈레톤을 설정했고 앱이 http://localhost:3000 에서 실행 중이라고 가정하는 것이 타당합니다.
이때 소스 페이지 보기를 하면 HTML과 CSS가 보입니다. 메타 태그, 제목 및 메타 설명도 볼 수 있습니다. 그러나 Next.js 앱에 새 경로를 추가하면 이를 볼 수 없습니다.
경로가 암호로 보호되어 있으면 검색 엔진 크롤러에 표시되지 않기 때문에 페이지에 제목과 메타 설명을 추가하지 않는 것이 좋습니다. 그러나 SEO가 중요하다면 제목과 설명을 추가해야 합니다.
두 가지 방법이 있습니다. index.js를 열고 다음을 검색합니다.
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
코드를 복사하여 모든 경로에 붙여넣을 수 있습니다. 그리고 모든 경로 파일의 맨 위에 다음 코드를 추가하는 것을 잊지 마십시오.
import Head from 'next/head'
Next.js에서 이를 수행하는 또 다른 방법이 있으며 여기에서 _app.js 파일에 헤드를 추가하여 수행할 수 있습니다. 계속 진행하기 전에 반응 라이브러리에서 Fragment를 가져와야 합니다.
import '../styles/globals.css'
import Head from "next/head";
import {Fragment} from "react";
function MyApp({ Component, pageProps }) {
return (
<Fragment>
<Head>
<title>My Next App</title>
<meta description="Helle there. This is the Next.js App" />
</Head>
<Component {...pageProps} />
</Fragment>
)
}
export default MyApp
그게 다야. 진행하기 전에 테스트하고 싶습니다. 페이지 디렉터리 아래에 새 파일 home.js를 만들어 새 경로(/home)를 만들어 봅시다.
다음 콘텐츠를 추가합니다.
function HomePage() {
return (
<div>
This is the Home Page
</div>
)
}
export default HomePage
URLhttp://localhost:3000을 방문하여 소스 페이지를 보거나 검사 요소를 검사할 시간입니다. 페이지의 제목과 설명이 표시됩니다.
여기에 또 다른 캐치가 있습니다. URLhttp://localhost:3000/을 방문하여 검사 요소를 수행하는 경우. _app.js에서 추가한 제목과 설명을 찾을 수 없습니다. 왜요? Next.js에서 경로의 Head 태그는 _app.js 파일의 Head 태그를 대체합니다. 단순히 최신 값으로 Head를 병합하고 업데이트합니다. 이 경우 index.js 파일에 제목을 정의했습니다. index.js 파일의 제목으로 Head 태그(_app.js에서)를 업데이트합니다.
Lang 속성 및 메타 설명
이 시점에서 Lighthouse 보고서를 생성하면 오류 요소에 [lang] 속성이 없는 것을 볼 수 있습니다.
lang 속성은 검색 엔진에 필수적입니다. 따라서 항상 lang 속성을 추가하는 것이 좋습니다.
lang 속성을 추가하려면 페이지 폴더 아래에 새 파일 _document.js를 만듭니다. _docuement.js 파일은 완전한 HTML 문서를 관리합니다.
_app.js 파일과 달리 클래스 기반 구성 요소입니다.
import Document from "next/document";
import {Html, Head, Main, NextScript } from "next/document";
class AppDocument extends Document {
render() {
return(
<Html lang="en">
<Head>
<meta name="description" content="This is my App description."/>
</Head>
<body>
<Main></Main>
<NextScript></NextScript>
</body>
</Html>
)
}
}
export default AppDocument
등대 보고서를 다시 생성하면 SEO 점수가 100%로 표시되는 것을 확인할 수 있습니다.
지금은 여기까지입니다. 다음 글에서 뵙겠습니다.
Reference
이 문제에 관하여(Next.js에서 SEO를 개선하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/akuks/how-to-improve-seo-in-next-js-mlb
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
import Document from "next/document";
import {Html, Head, Main, NextScript } from "next/document";
class AppDocument extends Document {
render() {
return(
<Html lang="en">
<Head>
<meta name="description" content="This is my App description."/>
</Head>
<body>
<Main></Main>
<NextScript></NextScript>
</body>
</Html>
)
}
}
export default AppDocument
Reference
이 문제에 관하여(Next.js에서 SEO를 개선하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/akuks/how-to-improve-seo-in-next-js-mlb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
