NextJS 블로그에 트위터 태그 추가

8466 단어 twitterseonextjs
트위터 게시물의 이미지는 트윗의 상호 작용을 증가시킬 것입니다. 사실입니다. 새로운 NextJS 웹사이트에서 블로깅하는 것을 좋아하고 트위터에서 공유하고 싶습니다. 하지만 블로그 URL이 다음 카드 스타일과 같지 않다는 것을 알게 됩니다.


이 문제를 해결하려면 페이지의 <head></head>에 twitter 태그가 있어야 합니다. 그렇다면 NextJS에서 이것을 어떻게 관리해야 할까요?

구성 요소의 반환 부분에 <Head> 태그를 추가할 수 있습니다.

import Head from 'next/head';

export default function example() {
  return (
    <div>
      <Head>
        <title>My site title</title>
      </Head>
      <h2>My awesome content</h2>
    </div>
  );
}


태그 안에 넣는 것은 무엇이든 문서의 헤드 섹션에서 사용할 수 있습니다. 따라서 여기에 트위터 태그를 추가할 수 있습니다. 그러나 더 나은 옵션으로 next-seo 패키지를 사용하여 이 문제를 처리할 수 있습니다.

npm i next-seo --save

이제 Seo.js라는 구성 요소를 만들어 보겠습니다.

// components/Seo.js
import { NextSeo } from 'next-seo';

export default function Seo({ post }) {
  const { title, excerpt, slug, coverImage } = post;
  return (
    <>
      <NextSeo
        title={title}
        description={excerpt}
        canonical={`https://myawesomewebsite.com/blog/${slug}`}
        openGraph={{
          type: 'website',
          url: 'https://myawesomewebsite.com',
          title: `${title} | originally posted on myawesomewebsite.com`,
          description: excerpt,
          locale: 'en_EN',
          images: [
            {
              url: coverImage,
              width: 800,
              height: 600,
              alt: `hero image for ${title}`,
            },
          ],
          site_name: 'myawesomewebsite.com',
        }}
        twitter={{
          handle: '@myawesometwittername',
          site: 'myawesomewebsite.com',
          cardType: 'summary',
        }}
      />
    </>
  );
}


자신의 데이터로 필드를 편집한 후 이 구성 요소를 블로그 구성 요소로 가져올 수 있습니다. 데이터를 소품으로 Seo.js 구성 요소에 전달하고 메타 데이터를 동적으로 렌더링하고 있음에 유의하십시오. 이 구성 요소는 NextJS의 동적 라우팅에 매우 유용할 수 있습니다.

import Seo from '@components/Seo';

export default function example() {
  const post = {
    // ...
  };
  return (
    <div>
      <Seo post={post} />
      <h2>My awesome content</h2>
    </div>
  );
}


그리고 그게 다야. 에서 URL이 예상대로 작동하는지 확인할 수 있습니다.

이 튜토리얼이 도움이 되었기를 바랍니다. 웹 개발, 특히 NextJS와 관련된 일일 콘텐츠를 공유하는 곳에서 저를 찾을 수 있습니다.
최대 연속 서열 곱셈 해법 (동적 기획)
Swift의 #ifdef DEBUG 방식

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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