Remix의 놀라운 SEO 기능

모든 최신 프레임워크는 SEO와 개발자가 이를 웹 사이트에 더 쉽게 통합하는 방법에 점점 더 초점을 맞추고 있습니다.

SEO는 검색 엔진 최적화(Search Engine Optimization)의 약자이며 검색 엔진에 대해 웹사이트를 얼마나 잘 최적화하는지에 달려 있습니다.

Note: Check out these five tags to get started with SEO.

Remix는 SEO 태그를 렌더링하는 위치

Remix에는 메타데이터를 설정할 수 있는 매우 멋진 후크가 있으며 모두 root.tsx 파일에서 시작됩니다.

이 함수의 형태로 기본 메타 세터를 찾을 수 있습니다.

export const meta: MetaFunction = () => ({
  charset: 'utf-8',
  title: 'Remix Notes',
  viewport: 'width=device-width,initial-scale=1',
});

보시다시피 여기서는 몇 가지 기본 사항만 설정했습니다. 후속 섹션에서 이를 변경하는 방법에 대해 좀 더 자세히 살펴보겠습니다.

그런 다음 아래 렌더링에서 <Meta /> 요소를 사용하여 다음과 같이 실제 섹션을 렌더링합니다.

export default function App() {
  return (
    <html lang='en' className='h-full'>
      <head>
        <Meta />
        <Links />
      </head>
      ...
    </html>
  );
}

이 설정의 멋진 부분은 앱의 모든 위치에서 이MetaFunction를 사용할 수 있다는 것입니다.

페이지의 소스 코드를 검사할 때 최소한 다음을 확인해야 합니다.

<head>
  <meta charset="utf-8" />
  <title>Remix Notes</title>
  <meta content="width=device-width,initial-scale=1" name="viewport" />
</head>

단일 페이지에서 메타 소품 설정

우리의 Pokémon example을 기준선으로 삼자.
routes/pokemon/index.tsx 파일을 열고 메타 함수를 추가해 보겠습니다.

export const meta: MetaFunction = () => ({
  title: 'The complete Pokémon list',
  description: 'This is the list with all existing Pokémon.',
});

이전에는 사용하지 않았던 설명을 추가한 것을 발견하셨을 것입니다.
Remix는 단순히 이 페이지에만 추가하기 때문에 이것은 Remix의 문제가 아닙니다.

이 페이지/pokemon에 대해 다음과 같은 HTML 출력이 생성됩니다.

<head>
  <meta charset="utf-8" />
  <title>The complete Pokémon list</title>
  <meta content="width=device-width,initial-scale=1" name="viewport" />
  <meta
    content="This is the list with all existing Pokémon"
    name="description"
  />
</head>

Remix의 동적 SEO 태그

지금까지 설정하려는 문자열을 정의하는 몇 가지 정적 태그를 사용했습니다.

하지만 단일 포켓몬 페이지에 동적 SEO 태그를 추가하려면 어떻게 해야 할까요?

이 단일 페이지에서 로더 기능을 어떻게 사용했는지 기억하십니까?
반환된 데이터를 단순히 전달하여 메타 함수에서 사용할 수 있습니다.

export const meta: MetaFunction = ({
  data,
}: {
  data: LoaderData | undefined,
}) => {
  if (!data) {
    return {
      title: 'Pokémon not found',
      description: 'We could not find this Pokémon',
    };
  }

  const name = data.pokemon.name;
  return {
    title: `This is the amazing ${name}`,
    description: `We caught the Pokémon with the name: ${name}`,
  };
};

여기에서 로더가 제공한 데이터 속성을 얻습니다.
그런 다음 데이터를 사용할 수 있는지 확인하고 데이터를 찾을 수 없는 경우를 대비하여 대체 항목을 추가할 수도 있습니다.
/pokemon/charizard 페이지를 열면 다음과 같은 메타 태그가 표시됩니다.

<head>
  <meta charset="utf-8" />
  <title>This is the amazing charizard</title>
  <meta content="width=device-width,initial-scale=1" name="viewport" />
  <meta
    content="We caught the Pokémon with the name: charizard"
    name="description"
  />
</head>

완벽한! 이제 동적으로 만들었습니다.

리믹스 SEO 옵션

지금까지는 Remix로 설정할 수 있는 매우 기본적인 SEO 태그에 대해서만 다루었지만 이 메타 기능을 사용하여 설정할 수 있는 항목이 많습니다.

모든 메타 태그를 사용할 수 있으며 필요한 경우 맞춤 태그를 설정할 수도 있습니다.

모든 메타 태그의 전체 목록을 찾으려면 다음 웹 사이트를 방문하십시오. Meta tags overview .

다음과 같이 설정할 수 있습니다.

export const meta: MetaFunction = () => {
  return {
    charset: 'utf-8',
    description: 'Welcome to our Remix app',
    keywords: 'Remix,app',
    'twitter:image': 'https://remix.app/social.png',
    'twitter:card': 'summary_large_image',
    'twitter:creator': '@DailyDevTips1',
    'twitter:site': '@DailyDevTips1',
    'twitter:title': 'Remix app',
    'twitter:description': 'Chris created this Remix app, check it out',
    custom: 'Something custom you like.',
  };
};

그러면 다음 HTML이 생성됩니다.

<head>
  <meta charset="utf-8" />
  <meta content="Welcome to our Remix app" name="description" />
  <meta content="Remix,app" name="keywords" />
  <meta content="https://remix.app/social.png" name="twitter:image" />
  <meta content="summary_large_image" name="twitter:card" />
  <meta content="@DailyDevTips1" name="twitter:creator" />
  <meta content="@DailyDevTips1" name="twitter:site" />
  <meta content="Remix app" name="twitter:title" />
  <meta
    content="Chris created this Remix app, check it out"
    name="twitter:description"
  />
  <meta content="Something custom you like" name="custom" />
</head>

나는 Remix가 이러한 SEO 속성을 즉시 설정하는 것을 얼마나 쉽게 만드는지 매우 감명받았습니다.

내 source code on GitHub도 볼 수 있습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나

Reference

이 문제에 관하여(Remix의 놀라운 SEO 기능), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dailydevtips1/the-amazing-seo-powers-of-remix-32a3

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)