Zenn
📖

Next.js + TypeScriptで簡単なSEO対策をしてみる

2023/03/01に公開2件
Next.js
SEO
TypeScript
個人開発
opengraphprotocol
tech

概要

Next.js + TypeScriptプロジェクトで出来る超シンプルなSEO対策をご紹介します。
デプロイ先はVercelとなります。
今回は、Open Graph Protocolを利用してSNSでシェアするときに画像付きに出来てリッチな感じに出来るようになりましょうの回です。
SEO対策は多岐に渡り、飛びつける最適解がないので迷いますよね・・・・(´･ω･`)

SEOとは

Search Engine Optimization(検索エンジン最適化)の略称になります。
Webサイトを上位表示させる為に不可欠な項目です。

https://en.wikipedia.org/wiki/Search_engine_optimizatio

Open Graph Protocolとは

Open GraphはFacebookによって作成されたプロトコルです。
Open Graphを使用すると、Webページのコンテンツを最適化して、ユーザーがメインのソーシャルネットワークFacebook、Twitter、LinkedInで共有できるようにすることができます。
このプロトコルは、コンピューター、スマートフォンのブラウザー、またはモバイルアプリケーションからの共有を容易にします。

https://fbdevwiki.com/wiki/Open_Graph_protocol

Canonicalとは

重複コンテンツ等のURL正規化や正規URL指定をする際に用いられる要素です。
詳しく知りたい方は下記リンクよりご確認ください。
https://en.wikipedia.org/wiki/Canonical_link_element

環境

  • Windows 10
  • Vscode
  • PowerShell 7.2.8
  • Node.js 18.14.1
  • npm 9.3.1
  • Next.js 13.1.6
  • TypeScript 4.9.5
  • Vercel

1. Next.jsプロジェクトの準備

下記コマンドでNext.js(TypeScript)プロジェクトを準備します。

npx create-next-app@latest --typescript

生成したプロジェクトをVercelへデプロイしておく。

2. seohead.tsxを作成する

  1. まず src/ directory に components/ directory を作成します。
ターミナル
cd src
mkdir components
  1. 次に components/ directory に seohead.tsx を作成します。
cd components
new-item seohead.tsx

https://learn.microsoft.com/ja-jp/powershell/module/microsoft.powershell.management/new-item?view=powershell-7.3

3. metatypes.tsを作成する

src/ directory に types/ directory を作成します。

cd src
mkdir types
cd types
new-item metatypes.ts

4. metatypes.tsに型を書く

では、seohead.tsx で使用する型を作りましょう。
以下の様にコードを記述します。

metatypes.ts
export type MetaTypes = {
  title?: string;
  titleTemplate?: string;
  description?: string;
  ogType?: string;
  imgUrl?: string;
};

5. seohead.tsxを編集しよう

先ほど作成したmetatypes.tsをimportします。
完成したコードが以下になります。

seohead.tsx
import React from "react";
import Head from "next/head";
import { MetaTypes } from "@/types/metatypes";
import { useRouter } from "next/router";

export const SeoHead = ({
  title,
  titleTemplate,
  description,
  ogType,
  imgUrl,
}: MetaTypes) => {
  const router = useRouter();
  const siteUrl = `${process.env.NEXT_PUBLIC_DEFAULT_SITE_URL}`;
  const Url = `${siteUrl}${router.asPath}`;
  const siteTitle = `${title} - ${titleTemplate}`;
  return (
    <Head>
      <meta name="viewport" content={"width=device-width, initial-scale=1"} />
      <title>{siteTitle}</title>
      <link href={Url} rel="canonical" />
      <meta name="twitter:card" content={"summary_large_image"} />
      <meta property="og:image" content={imgUrl} />
      <meta property="og:title" content={siteTitle} />
      <meta property="og:url" content={Url} />
      <meta name="description" content={description} />
      <meta property="og:description" content={description} />
      <meta property="og:type" content={ogType} />
      <link rel="icon" type="image/svg+xml" href={"/samplelogo.svg"} />
    </Head>
  );
};

6. seohead.tsxをインポートしてみよう

それでは、完成した seohead.tsx を index.tsx にimportしてみよう。
以下の様にコードを追加します。
最後に全てのコミットをプッシュします。

index.tsx
import { SeoHead } from "@/components/seohead";
import styles from "@/styles/Home.module.css";

export default function Home() {
  const pageOgImg: string = `${process.env.NEXT_PUBLIC_DEFAULT_SITE_URL}`;
  return (
    <>
      <SeoHead
        title={"Home"}
        titleTemplate={"Sample Nextjs App"}
        description={"Next.js + TypeScript SEO編"}
        ogType={"website"}
	// public/ に1200x630pxの画像を用意してね！　筆者はpublic/にnext.jpgという画像を準備しました。
        imgUrl={`${pageOgImg}/next.jpg`} 
      />
      <main className={styles.main}>
        <h1>Next.js + TypeScript Sample Project.</h1>
      </main>
    </>
  );
}

7. Og:Imageが表示されるか確認しよう

では今回の成果の確認をしましょう！
間違いがなければ以下のように表示されると思います。

https://sample-nextjs-app.vercel.app/

最後に

この記事を最後までお読み下さりありがとうございました。
所々端折っているので何かあればコメントよろしくお願いいたします。
次回はBootstrapでのスタイリング編をUPしたいと思います。
TailwindやMaterial UI...etcでも良かったのですが、また別の機会に書きたいと思います。

Discussion