サイト制作に関するメモ書き

HOME > CMS > Tumblrでtitleとmeta descriptionを設定する

Tumblrでtitleとmeta descriptionを設定する

Tumblrで作成しているAD-Bookmarksのtitleやdescriptionの設定をしてみたので、方法をメモしておきます。

変更方法

今回はトップページ・タグ一覧ページ・記事詳細ページ・固定ページに設定を行います。

Tumblrにログイン後、変更したいブログを選択して、右側のメニューから外観を編集を選択します。

to-set-the-title-and-meta-description-on-tumblr01

「サイトのテーマ」項目のテーマの編集をクリックし、カスタマイズ画面へ移動します。

to-set-the-title-and-meta-description-on-tumblr02

ブログのタイトルと説明文を設定していない場合、下記に追加しておいてください。

to-set-the-title-and-meta-description-on-tumblr03

ブログのタイトルと説明文の設定が完了したら、「HTMLを編集」を選択してtitleとdescriptionを変更します。

to-set-the-title-and-meta-description-on-tumblr04

今回はtitleとdescriptionを以下のように変更しました。

HTML

<title>{block:PostSummary}{PostSummary} | {/block:PostSummary}{block:TagPage}{Tag} | {/block:TagPage}{Title}</title>
{block:Description}<meta name="description" content="{block:TagPage}{Tag}の一覧ページです。{/block:TagPage}{MetaDescription}" />{/block:Description}

各ページでの出力は以下のようになりました。

トップ

<title>AD-Bookmarks</title>
<meta name="description" content="アニメ・ゲーム系で、見せ方が面白いと思ったサイトを中心にストックしています。" />

タグ一覧ページ

<title>anime | AD-Bookmarks</title>
<meta name="description" content="animeの一覧ページです。" />

記事詳細ページ

<title>ハイスクール・フリート | AD-Bookmarks</title>
<meta name="description" content="ハイスクール・フリート" />

固定ページ(about)

<title>ABOUT | AD-Bookmarks</title>
<meta name="description" content="ABOUT アニメ・ゲーム系で、見せ方が面白いと思ったサイトを中心にストックしています。 JavaScriptやCSSでのアニメーションが多めですが、デザインやUIが気に入ったものや Flashサイトなども含みます。 カテゴリー &bull; ANIME アニメの公式サイトです。 &bull; GAME ゲーム系のサイトです。 &bull; BOOK マンガ・小説系のサイトです。 &bull; MOVIE 映画系のサイトです。 &bull;..." />

 

{Title} ブログのタイトルを表示。
{MetaDescription} トップではブログの説明を表示。
記事詳細ページや固定ページは内容の一部を抜粋して表示。
タグ一覧ページには何も表示されないようです。
{block:PostSummary}{PostSummary}{/block:PostSummary} {block:PostSummary}~{/block:PostSummary}は記事詳細ページや固定ページの場合に中身が実行される。
{PostSummary}はそのページのタイトルを表示。
{block:TagPage}{Tag}{/block:TagPage} {block:TagPage}~{/block:TagPage}はタグ一覧ページの場合に中身が実行される。
{Tag}は該当するタグ名が表示。

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP