PR
PR

【Astro入門】SEOに強い共通レイアウト！タイトルと説明文を動的に変更する方法

記事内に広告が含まれています。

前回はAstroのディレクトリ構造の解説と、全ページ共通のひな形となるレイアウト（BaseLayout.astro）を作成しました。

前回の記事のリンク: https://vpslife.server-memo.net/astro-directory-layout/

今回は、作成したレイアウトをさらに進化させ、SEO（検索エンジン対策）に欠かせない「ページごとのタイトルと説明文の動的変更」を実装してみます。

なぜ動的にタイトルと説明文を変更する必要があるのか？

前回の状態では、トップページを開いてもその他のページの記事を開いても、ブラウザのタブには常に「Game Life」と表示されてしまいます。

これでは、読者もGoogleの検索エンジンも「今どのページを見ているのか」が分かりづらい状態です。

そこで、Astroの「Props（プロップス）」とJavaScriptを使って、「ページタイトル|サイト名」といったように、ページごとに自動的にタイトルが以下のように生成される仕組みを作っていきます。

  • トップページ： Game Life
  • アバウトページ： サイトについて | Game Life

BaseLayout.astro（ひな形）の編集

前回作成した「src/layouts/BaseLayout.astro」を編集します。

ここで、「サイト全体の設定（デフォルト）」と「各ページ固有の設定」を合体させて、最終的なページタイトルを作り出します。 

---
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';

// サイト全体のデフォルト設定（基本の看板と予備の説明文）
const siteName = "Game Life";
const defaultDescription = "ゲームに関するブログです。";

// 各ページから渡されるデータを受け取る
const { pageTitle, pageDescription } = Astro.props;

// タイトルの合体
// pageTitleが渡されていれば「ページ名|サイト名」にし、無ければ「サイト名」のみにする
const finalTitle = pageTitle ? `${pageTitle} | ${siteName}` : siteName;

// 説明文の代役の仕組み
// pageDescriptionが渡されていればそれを使い、無ければdefaultDescriptionを使う
const finalDescription = pageDescription || defaultDescription;
---

<html lang="ja">
  <head>
    <BaseHead title={finalTitle} description={finalDescription} />
  </head>
  <body>
    <Header />
    <main style="padding: 20px;">
      <slot />
    </main>
    <Footer />
  </body>
</html>

タイトルの合体と、説明文の表示に関する部分のJavaScriptについて解説します。

タイトルの合体（三項演算子 ? :）

「pageTitle」が存在する場合は「${pageTitle} | ${siteName}」（ページタイトル|サイト名）を「finalTitle」に格納し、存在しない場合は「siteName」を格納します。 

const finalTitle = pageTitle ? `${pageTitle} | ${siteName}` : siteName;

※``（バッククォート）で囲まれた文字列の中で変数を展開する場合には、${変数}といった書き方をします。

説明文の代役（OR演算子 ||）

「pageDescription」が空っぽ（未設定）だった場合は、右側の「defaultDescription」を「finalDescription」に格納しています。 

const finalDescription = pageDescription || defaultDescription;

index.astro（トップページ）の編集

トップページである「src/pages/index.astro」を編集します。

トップページは「siteName」と「defaultDescription」の設定をそのまま使いたいので、変数の定義やデータの受け渡しは行いません。 

---
import BaseLayout from '../layouts/BaseLayout.astro';
// 変数の定義は不要
---

<BaseLayout>
  <main>
    <h2>こんにちは！</h2>
    <p>何も渡さなくても、自動で「Game Life」とデフォルト説明文が適用されます！</p>
  </main>
</BaseLayout>

Webブラウザでトップページ(http://localhost:4321/)にアクセスしてタブの部分を確認すると、siteNameで設定されている「Game Life」と表示されていることが確認できます。

about.astro（アバウトページ）の作成

アバウトページとして「src/pages/about.astro」ファイルを新しく作成します。

ここでは、「pageTitle="サイトについて"」と「pageDescription="Game Lifeの運営者情報です。"」を設定して、「BaseLayout.astro」にデータを渡すようにします。 

---
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout pageTitle="サイトについて" pageDescription="Game Lifeの運営者情報です。">
  <main>
    <h2>アバウトページ</h2>
    <p>自動的に「サイトについて|Game Life」というタイトルになります。</p>
  </main>
</BaseLayout>

Webブラウザでaboutページ（http://localhost:4321/about/）にアクセスしてタブの部分を確認すると、「サイトについて|Game Life」と表示されていることが確認できます。

ページのソースを確認すると、<head>内のtitleとdescriptionに設定した内容が反映されていることが確認できます。

  • <title>サイトについて | Game Life</title>
  • <meta name="description" content="Game Lifeの運営者情報です。">

これで、ページごとに「title」と「description」を動的に生成することが出来るようになりました。

コメント

タイトルとURLをコピーしました