はじめに
はじめまして！
上記のアプリを開発した際に、OGPの表示に苦労したので今回まとめてみます。
できること
- Next.js13 + Vercel + App Routerの環境で、OGPとアナリティクスの設定ができるようになる
完成品
環境構築
まずは環境構築です。
npx create-next-app@latest
✔ What is your project named? … next-ogp-analytics
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
cd next-ogp-analytics
npm run dev
全て本番環境で動作確認をするようにするので、リポジトリの作成と適宜commit、
Vercelへのデプロイ済みという前提で進めていきます！
済んでいない方はこちらを参考に進めてみてください。
https://typescriptbook.jp/tutorials/vercel-deploy
リンクの表示
src/app/layout.tsx
import Image from 'next/image';
import Link from 'next/link';
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<Link href="https://twitter.com/share?url=https://next-ogp-analytics.vercel.app">
Twitter
</Link>
</main>
);
OGPの配置
手順としては2つだけです！
- 1.layout.tsxのMetadataにタイトルと説明の設定
- 2.OGP画像の配置
src/app/layout.tsx
import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
metadataBase: new URL('https://next-ogp-analytics.vercel.app/'), //本番環境のアプリ名
title: 'タイトル',
description: '説明',
openGraph: {
title: 'タイトル',
description: '説明',
},
twitter: {
title: 'タイトル',
description: '説明',
card: 'summary_large_image',
},
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}
Next.js13以降ではsrc/app配下に指定の命名で画像を配置することで、画像をもとに動的にmetaタグが生成されます。
src/app配下にopengraph-image.jpgとtwitter-image.jpgで画像を配置します。
推奨サイズは1200(幅)*630(高さ)です。
念のため確認
Twitter Card validatorにURLを入力して、成功のログが出るか確認しましょう。
OGPが表示されました！
OGP表示まで時間がかかる場合があります。
アナリティクスの設定
今回はGoogle Anlyticsではなく、Vercerlで用意されている@vercel/analyticsで設定をします。
npm i @vercel/analytics
import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { Analytics } from '@vercel/analytics/react'; //ここを追加
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
metadataBase: new URL('https://next-ogp-analytics.vercel.app/'),//本番環境のアプリ名
title: 'タイトル',
description: '説明',
openGraph: {
title: 'タイトル',
description: '説明',
},
twitter: {
title: 'タイトル',
description: '説明',
card: 'summary_large_image',
},
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
{children}
<Analytics /> //ここを追加
</body>
</html>
);
}
Vercelの管理画面でアナリティクスを確認することができます。
シンプルな項目ではありますが、小規模の個人開発にはこのくらいでも向いてそうです。
基本hobbyプランになるので無料枠で使用できますが、サービスの規模によっては課金する必要も出てきます。
https://vercel.com/docs/accounts/plans
おわりに
OGPの表示に苦労したので、最低限を考慮してまとめられてよかったです。
最後まで読んでいただき、ありがとうございました！