meta タグの description を設定する方法

「すぐ使えるCMS」で更新している記事ページ(webdir/1.html, 2.html,..)にメタタグ(metaタグ、<meta>)の description を設定する方法を紹介します。

description メタタグとは

<meta> タグはホームページの内容を分類、整理する目的でHTMLファイル内に含めておく内容で、そのうち description はページの内容の要約(概要、サマリー)を伝えるのに使われます。検索エンジンの検索結果ページでは description がページのタイトルとともに表示されやすいので、的確な内容を指定しておくと閲覧者の方ヘの助けとなります。

記事ごとの <meta> description タグ追加ができる製品

「すぐ使えるCMS」の「詳細ページ」のある製品でこの方法に対応しています。

<meta> タグの設定が不要なケース

初期設定で <meta> タグの description が表示されるようになっている製品もあります。新たにダウンロードされる製品であれば、既に設定済ですのでこのページの作業は不要です。

このページの方法は、お手元に既にあるバージョンの旧い製品を再設定している方が対象です。

description <meta> タグの 設定方法

templates/article/article.html の編集

テンプレート templates/article/article.html を編集して<head> - </head> の間に以下のように1か所コードを追加して下さい。赤字が追加です。

templates/article/article.html に追加するコード

コピー
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>%_subject_% (%_yyyy_%-%_mm_%-%_dd_%)</title>
<meta name="description" content="%_summary_%">
<link rel="alternate" type="application/rss+xml" title="記事一覧" href="new.xml">
</head>

アップロード

編集が終わったら、保存した以下のテンプレートファイルをサーバの同じ位置に上書きアップロードして下さい。

templates/article/article.html

再構築

管理画面一覧の「再構築(テンプレート反映)」ボタンを押して下さい。最新のテンプレートを反映してページが自動更新されます。まだ記事を登録していなかった場合は1件登録して下さい。

コード確認

ブラウザで表示を再読み込みの上、ソースを表示させて <meta> タグが追加された事を確認して下さい。

description の内容の変更

上記の設定で description メタタグに表示される内容は、「記事内容」欄の入力の先頭から約100文字を自動的に抜粋したものです。これを「すぐ使えるCMS」では「サマリー」と呼んでいます。

このサマリーの自動抜粋の文字数を変更したり、内容を手動で編集する事ができます。設定方法は下記ページをご覧下さい。

サマリー(記事の要約、抜粋)の文字数、省略時の記載(「...」)を変更する方法
サマリー(記事の要約、抜粋)を手動編集する方法

関連記事

「すぐ使えるCMS」の入力欄に、強制的な文字数制限を設ける方法と、入力文字数のカウンターを付ける方法。
「すぐ使えるCMS」で書き出したページにFacebookの「いいね」ボタンを設置する方法。細かい調整のためのメタタグ Open Graph Protocol tag(OGP タグ) の設定方法。

Twitterカードの設定方法

応用マニュアル ホームページ画面
ホームページにTwitterカードを設定する方法。Twitterカードとは、ツイッターでホームページが紹介(ツイート、シェア)された時に見栄え良く表示するために、ホームページに含めておくメタタグです。

関連コンテンツ