useRouter in SEO Component
SEO.tsx
1const OG = ({ title, description }: StProp) => {
2 const router = useRouter();
3 return (
4 <Head>
5 <title>{title}</title>
6 <meta property="og:title" content={title} />
7 <meta property="description" content={description} />
8 <meta property="og:description" content={description} />
9 <meta property="og:image" content={`https://og-image-sw.vercel.app/${title}.png`} />
10 <meta property="og:url" content={`https://sou-web.net${router.asPath}`} />
11 </Head>
12 );
13};
14
15export default OG;
Next.jsでページのURLを取得するには次のようにuseRouterを使って取得します。
1import { useRouter } from"next/router";
2constrouter = useRouter();
3return (
4{router.asPath}
5);
ですが全てのページでこの処理を書くのはいささか冗長的なのでSEO(Metaタグ)コンポーネントに埋め込んでみました。 これで全てのページごとにconst router = useRouter();を記述する必要がありません。
使い方は
1<OG title="404 - Sou Watanabe"description="Erorr URL"/>
として各ページのLayoutタグもしくはdivタグの次に上の渡し方で記述してあげればURLが取得できています。