小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

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

最終更新日: 2015-01-30

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

description メタタグとは

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

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

この方法に対応しているのは以下の製品です。

<meta> タグの設定が不要なバージョン

Ver. 4.7 以降の製品では初期設定で <meta> タグの description が表示されるようになっていますので新たな編集は不要です。

ただし、カスタマイズサンプルをダウンロードした場合は設定が抜けている場合があります。カスタマイズサンプルをダウンロードした場合とどちらか分からない場合は、下記の編集内容を確認して設定が抜けていれば追加して下さい。

<meta> タグでの description 設定方法

準備:製品設置

これから「すぐ使えるCGI」をお試しされる方はまず上の製品へのリンクから製品をダウンロードの上設置をして下さい。1か月間無料でお試しいただけます。

ダウンロードが完了したページに「ステップ by ステップガイド」のリンクが表示されますので、これに沿って設置を行って下さい。

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文字を自動的に抜粋したものです。これを「すぐ使えるCGI」では「サマリー」と呼んでいます。

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

関連リンク

さらに詳しく