Strapi로 NextJS 웹사이트에서 SEO를 관리하는 방법

12331 단어 graphqlnextjsjavascriptwebdev
### 소개
안녕 친구, 이 기사에서는 NextJS을(를) 사용하여 Strapi CMS 웹사이트에서 검색 엔진 최적화(SEO)를 동적으로 처리하는 방법을 설명하겠습니다.

설정



이 문서의 목적은 로컬 컴퓨터에서 NextJS 또는 Strapi를 설정하는 방법을 알려주는 것이 아닙니다. 따라서 이러한 기술을 처음 사용하는 경우 프로젝트를 시작하고 실행하는 데 유용한 몇 가지 링크가 있습니다.

스트라피
  • 프로젝트 설정 here
  • 데이터베이스 구성here
  • Graphql 구성 here

    • 다음
  • 프로젝트 설정 here
  • Apollo 클라이언트 구성here

    • 설정을 완료하셨습니까?

    다음 단계에 따라 Strapi에서 콘텐츠 유형을 설정해 보겠습니다.
  • 아래 이미지
    • 와 같이 사이드바에서 Content-Type Builder를 클릭합니다.


  • 아래 이미지
    • 와 같이 create new collection type를 클릭합니다.



    이제 컬렉션 유형을 만드는 방법을 알았으므로 웹 사이트의 페이지에 대한 검색 엔진 최적화를 관리하기 위해 두 가지 컬렉션 콘텐츠 유형을 만듭니다.

    먼저 다음을 포함하는 두 개의 필드가 있는 Seo Meta Tag 컬렉션 유형을 만듭니다.


  • property : 이것은 텍스트 필드입니다.
  • content : 이것은 텍스트 필드이기도 합니다
    • .

    다음으로 두 개의 필드가 있는 SEO 컬렉션 유형을 만듭니다.


  • Title : 이것은 텍스트 필드입니다.
  • seo_meta_tags : 아래 이미지와 같이 여러 SEO 메타 태그가 특정 SEO 컬렉션에 속하는 관계 필드입니다
    • .



    이제 모음 유형 만들기를 완료했습니다. 웹 사이트 페이지에서 콘텐츠를 관리하려면 single content-type를 만들어야 합니다. 이 콘텐츠 유형에서 생성한 seo 컬렉션과의 관계를 추가합니다.





    다음으로 사이드바의 콘텐츠 관리자로 이동하여 그에 따라 모든 콘텐츠를 업데이트하고 모두 게시하여 코딩을 시작할 수 있습니다.

    그러나 시작하기 전에 콘텐츠 유형에 대한 공개 액세스를 활성화해야 합니다. 따라서 설정 -> 역할 -> 공개로 이동하여 만들고 저장한 모든 콘텐츠 유형에 대해 find 또는/및 findOne를 활성화해야 합니다.



    코딩을 시작하자!!!

    먼저 strapi에서 데이터를 가져오는 데 필요한 쿼리를 만듭니다. 루트 디렉터리에 graphql라는 폴더를 만들고 graphql 폴더 안에 HomePageQuery.ts라는 파일을 만듭니다. HomePageQuery.ts 파일 내에 다음 코드를 추가합니다.

    // /graphql/HomePageQuery.ts

import { gql } from "@apollo/client";

export default gql`
  # Write your query or mutation here
  query HomePage {
    homePage {
      data {
        attributes {
          seo {
            data {
              attributes {
                Title
                seo_meta_tags {
                  data {
                    attributes {
                      property
                      content
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
`;


    다음으로 /pages/index.tsx의 코드를 다음 코드로 바꿉니다.

    // /pages/index.tsx

import type { NextPage } from "next";
import client from "../apollo-client";
import query from "../graphql/HomePageQuery";

export async function getStaticProps() {
  const { data } = await client.query({
    query,
  });

  // data being fetched through the query. In this case we get the seo object which contains the title and meta tags 
  /**
   * content = {
   *    seo: {
   *      Title: <whatever title you set on strapi dashboard>,
   *      seo_meta_tags: {
   *        data: {attributes: {property: <set-data>, content: <set-data>}} 
   *      }
   *    }
   * }
   */
  const content = data.homePage.data.attributes;

  return {
    props: {
      content,
    },
  };
}

const Home: NextPage = () => {
  return <div></div>;
};

export default Home;


    페이지에 대한 getStaticProps 메서드의 props에 seo 개체를 전달했기 때문에 /pages/_app.tsx ~ pageProps에서 액세스할 수 있으므로 이제 모든 페이지에 대한 seo 데이터를 관리하는 중심점을 가질 수 있습니다. 따라서 해당 파일/pages/_app.tsx의 코드를 다음 코드로 업데이트하게 됩니다.

    // /pages/_app.tsx

import "../styles/globals.css";
import type { AppProps } from "next/app";
import Head from "next/head";

function MyApp({ Component, pageProps }: AppProps) {
  const seoDetails = pageProps?.content?.seo.data.attributes || {};

  return (
    <>
      <Head>
        <title>{seoDetails.Title}</title>
        {seoDetails.seo_meta_tags &&
          seoDetails.seo_meta_tags.data.map(({ attributes }: any, i: any) => (
            <meta key={i} {...attributes} />
          ))}
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;


    서버를 시작하고 웹 브라우저에서 웹 사이트를 열면 업데이트한 페이지의 제목이 변경된 것을 알 수 있으며 개발자 도구를 사용하여 메타 태그도 확인할 수 있습니다.

    결론



    이 기사에서 우리는 strapi 및 nextjs 프로젝트를 생성할 수 있었고 콘텐츠 유형을 정의하고 콘텐츠를 추가했으며 strapi의 데이터를 처리하기 위해 nextjs 프로젝트에 논리를 추가할 수도 있었습니다. 이 프로젝트의 코드는 here에서 찾을 수 있습니다.

    많은 시각적 설명이 필요하기 때문에 기사를 따라가기가 어려울 수 있음을 이해합니다. 이 경우 . 최대 50명의 구독자를 확보할 수 있도록 도와주시면 이 기사에 대한 자세한 설명을 위해 동영상을 올릴 것입니다.

    와github에서 나를 팔로우하고 내 게시물을 좋아하고 공유하는 것을 잊지 마십시오.

    감사.
    Coral EdgeTPU USB Accelerator with VirtualBox
    PHP - shriekdj 소개 | shriekdj가 PHP로 Hello World 프로그램을 작성하는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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