Next.js에서 효과적으로 페이지의 SEO 및 형식 구성

2463 단어 typescriptnextjsreactjavascript
Next.js 애플리케이션 구성 및 구성 요소 사용.

Next.js를 사용하여 애플리케이션을 만들고 각 페이지에 고유한 SEO 전략과 동일한 머리글, 바닥글 및 탐색 모음이 있기를 원한다고 상상해 보십시오.

무엇을 할 수 있습니까?

간단한 옵션은 각 페이지에서 반복적으로 호출되는 공유 구성 요소를 구축하는 것입니다.

그러나, 당신은 이것을 시도할 수 있습니다 👇
  • 이 글을 읽기 전에 이미 Next.js 앱을 개발하셨기를 바랍니다.
    그렇지 않은 경우 이 페이지를 방문하세요. 👉 https://nextjs.org/docs/getting-started
  • src 디렉터리 내의 구성 요소라는 새 폴더에 이름이 Format 및 SEOSetup인 두 구성 요소를 만듭니다.
    이 구성 요소인 "형식"은 페이지의 레이아웃을 나타냅니다.
    여기에서 이 경우 모든 페이지의 레이아웃은 이 흐름에서 Navbar, Main content, Footer가 됩니다.
    따라서 아래에서 정의합니다 👇

    • import { FC } from 'react';

import Footer from '../Footer';
import Navbar  from '../Navbar';

const Format: FC = (props) => {
  return (
    <>
      <Navbar />
      <Main>{props.children}</Main>
      <Footer />
    </>
  );
};

export default Format;


  • SEOSetup에서는 실제로 메타 및 제목 태그 필드에 대한 소품으로 제공된 데이터를 사용하여 공통 태그를 구성하고 있습니다.
    헤드 태그를 반복적으로 생성하는 대신 페이지에서 SEO 관련 정보를 정의해야 할 때마다 이 SEOSetup 구성 요소를 활용할 수 있습니다.

    • import Head from 'next/head';

export interface MetaData {
  title: string;
  description: string;
}

const SEOSetup: FC<MetaData> = (props) => {
  const {
    title,
    description,    
  } = props;

return (
    <Head>
      <title>{title}</title>
      <meta name={'title'} content={title} />
      <meta name={'description'} content={description} />
    </Head>
  );
};

export default SEOSetup;


  • 마지막으로 페이지에서 활용하십시오. 여기에서는 페이지를 형식 구성요소로 래핑하고 맞춤 SEOSetup 태그로 SEO를 설정합니다.

    • import type { NextPage } from 'next'

import Format from '../components/Format';
import SEOSetup from '../components/SEOSetup';

const Home: NextPage = () => {
  return (
    <Format>
      <SEOSetup
        title="This is title of the Home Page"
        description="This is description of Home Page"
      />
      <div>
        This is Home Page.
      </div>
    </Format>
  )
}

export default Home;


    ⭐️ ⭐️ 끝 ⭐️️️️️ ⭐️

    도움이 되었기를 바랍니다. 🙌
    댓글로 알려주세요. 📪

    이러한 유형의 내용을 더 보려면 Twitter에서 저를 팔로우하세요 —
    Line Bot으로 단어장을 만들어 보았습니다.
    Colima - Docker Desktop 없이 도커를 사용하는 방법은 무엇입니까?

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage