【グーペ】タイトルのカスタマイズ方法やdescriptionを個別に設定する方法

以前、ホームページ制作ツール「グーペ」でタイトルやdescriptionなどの編集方法をご紹介しました。
【グーペ】タイトルやdescription、トラッキングコードのお手軽設定について

こちらで設定されたdescriptionについては、Webサイト全体に反映されるため、全ページ同じ文章が挿入されてしまいます。

SEO対策の側面から見ると、個別に設定されている方が好ましいと考えられています。もっとそれぞれ別に変更したい場合、グーペでは以下のようなカスタマイズ方法がありますので参考までにご紹介いたします。

グーペからタイトル・descriptionの個別編集方法

タイトルやdescripitonは「基本設定」以外からでも以下のように変更が可能です。

グーペの管理画面にログインし、左メニューから「ホームページ設定」の「デザイン設定」をクリックします。

続いて使用中のデザイン名をクリックします。デザイン名の左側に赤い旗マークが付いていたら、それが現在使用しているテンプレートです。

詳細編集画面からHTMLを編集します。かんたん編集画面になっている場合は、「詳細編集はこちら」というボタンをクリックしてください。

HTMLが編集できるエリアをご覧ください。上から5行目に以下のような記述があります。

<title>{site_title}{site_title_sub}</title>

<title>～</title>で囲まれた部分がタイトルです。
注目すべきはその中身。{site_title}と{site_title_sub}が記述されています。これらはグーペだけで使用できる独自タグになっています。それぞれ以下のような意味があります。

これにより、基本的に設定されているトップページ以外のタイトルは、『Webサイトタイトル – ページ名』という形になります。

ちなみに、トップページには個別のページ名がないため、{site_title_sub}の中身が無いと判断され、{site_title}のみが表示されることになります。

グーペではタイトルはもともと個別に設定されていますが、今回は以下のようにカスタマイズしてみようと思います。

『Webサイトタイトル – ページ名』
↓　↓　↓
『ページ名 – Webサイトタイトル』

ページ名が前方にあることで、そのページが何を表しているのかわかりやすくなります。検索結果にも反映される部分であるため、Webサイトタイトルよりもページ名が目立つようにカスタマイズしましょう。そのためには、グーペのある独自タグが必要になります。それが以下のタグです。

これを使って、ページ名を前方に、Webサイトタイトルを後方になるように組み合わせると以下のようになります。

<title>{site_title_sub2}{site_title}</title>

先ほどのHTMLの5行目を上記のように書き換えて、変更を保存するボタンをクリックします。これで編集は完了です。

続いてdescriptionをカスタマイズしていきます。グーペでは、もともと全ページ同じ文章が入るように指示されていました。これをそれぞれ違うものにするには、先に述べたタイトルのようにページ名を先頭にしましょう。

同じくHTMLを編集するエリアで、上から8行目に注目してください。変更前は以下のように記述されています。

<meta name="description" content="{site_description}" />

ここには以下の独自タグが使用されています。

この独自タグには、管理画面左メニューから「基本設定＞ホームページ情報：ホームページの説明」で入力した文章がそのまま入る形になります。

こちらも、ページ名を先頭に付けることでそれぞれ個別のdescriptionにカスタマイズします。編集する形は以下のようになります。

『meta description』
↓　↓　↓
『ページ名 – meta description』

このように反映するには、先ほどの独自タグを組み合わせれば可能です。変更すると以下のようになります。

<meta name="description" content="{site_title_sub2}{site_description}" />

これをHTMLの8行目と書き換えて、変更を保存するボタンをクリックしてください。すると、トップページ以外にはそのページ名が先頭に付いた状態のdescriptionに変更されます。

以上が、タイトルやdescriptionを個別に変更する方法です。他にもできそうなカスタマイズ方法があれば、随時公開していきます。