Canonical, 태그 및 중복 페이지 문제 해결 가이드
KUKJIN LEE • 4개월 전 작성
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에서 와일드카드 패턴을 사용하여 중복 페이지를 표준 페이지로 리디렉션합니다.
![[GPT] PMP 시험 대비: 난이도 별 문제2](/_next/image?url=https%3A%2F%2Fd2gg9iclns4v4e.cloudfront.net%2Fimages%2Fnews%2F1731479777321_1731479777321.jpg&w=256&q=75)
