Canonical, 태그 및 중복 페이지 문제 해결 가이드

KUKJIN LEE • 5개월 전 작성

1. Canonical 태그 설정

Canonical 태그는 구글에 표준 페이지를 알려 중복 콘텐츠 문제를 해결하는 데 사용됩니다. Next.js의 app directory 구조를 사용하여 모든 페이지에 Canonical 태그를 추가할 수 있습니다.

app/layout.js

import { usePathname } from 'next/navigation';
import Head from 'next/head';

export default function RootLayout({ children }) {
  const pathname = usePathname();
  const canonicalUrl = `https://kakao.gg${pathname}`;

  return (
    <html lang="en">
      <Head>
        <link rel="canonical" href={canonicalUrl} />
      </Head>
      <body>
        {children}
      </body>
    </html>
  );
}

이 설정은 모든 페이지에 Canonical 태그를 자동으로 추가합니다.

2. 리디렉션 설정

중복 페이지가 리디렉션을 통해 해결될 수 있는 경우, Next.js의 redirects 설정을 사용하여 모든 /sign-in 관련 페이지를 표준 페이지로 리디렉션할 수 있습니다.

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    mdxRs: true,
    serverComponentsExternalPackages: ["mongoose"],
    serverActions: {
      bodySizeLimit: "5mb",
    },
  },
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "*",
      },
      {
        protocol: "http",
        hostname: "*",
      },
    ],
  },
  async redirects() {
    return [
      {
        source: '/sign-in/*',
        destination: 'https://kakao.gg/sign-in',
        permanent: true,
      },
      // 다른 리디렉션 규칙을 여기에 추가할 수 있습니다.
    ];
  },
};

module.exports = nextConfig;

이 설정은 /sign-in 경로 아래의 모든 URL을 https://kakao.gg/sign-in으로 리디렉션합니다.

요약

Canonical 태그 설정: app/layout.js에서 canonical 태그를 설정하여 모든 페이지에 추가합니다.
리디렉션 설정: next.config.js에서 와일드카드 패턴을 사용하여 중복 페이지를 표준 페이지로 리디렉션합니다.

Canonical, 태그 및 중복 페이지 문제 해결 가이드

1. Canonical 태그 설정

app/layout.js

2. 리디렉션 설정

next.config.js

요약

New Tech Posts

추천 도서

Our Channels