NextJS에서 SEO용 로케일에 대한 링크 태그 생성

3600 단어 javascriptnextjsseoi18n
이것은 어렵지 않았지만 좋은 검색 결과를 찾지 못했기 때문에 여기에 빠른 팁이 있습니다.

현지화를 위해 next-translate with nextjs를 사용하고 있지만 이 기술은 아마도 next-i18next와 같은 다른 현지화 프레임워크와 함께 작동할 것입니다.

페이지/_app.ts에서

import Head from 'next/head';
import type { AppProps } from 'next/app';
import {useRouter} from 'next/router';

const supportedLocales = ['ar-ye', 'en-us', 'fr'];

export default function MyApp({ Component, pageProps }: AppProps): ReactElement {
  const {asPath} = useRouter();
  return (
    <>
      <Head>
        {supportedLocales.map(loc =>
          <link rel="alternate" hrefLang={loc} href={`/${loc}${asPath}`}/>)}
      </Head>
      <Component {...pageProps} />
    </>
  );

}


이것이 Google이 번역된 페이지를 찾는 데 도움이 되기를 바랍니다.
React를 사용하여 Fullcalendar에서 Google 캘린더 이벤트 표시
React의 useRef 대 useState

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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