［ASP.NET］ページのタイトルやメタ情報を動的に変更するには？［2.0のみ、C#、VB］

.NET TIPS

［ASP.NET］ページのタイトルやメタ情報を動的に変更するには？［2.0のみ、C#、VB］

山田祥寛
2006/07/14

　SEO（検索エンジン最適化）という観点では、<title>タグや<meta>タグのKeyword属性、Description属性に適切な値をセットしておくことは重要だ（Googleでは重要視されていないといわれるが、Yahoo!では参照されているとされる）。サイトが大規模になれば、ふと忘れがちなこうした情報もデータベース化することで、漏れなく管理できるようになる。

　もっとも、アプリケーション開発に際してはごく当たり前と思われるこのような作業を行うにも、ASP.NET 1.xではややトリッキーな操作を行う必要があった。その一例は、「TIPS：［ASP.NET］アプリケーション共通のヘッダ／フッタを追加するには？」でも紹介しているので、併せて参照していただくとよい。

　本稿では、ASP.NET 2.0から導入されたHtmlHeadクラスやHtmlMetaクラス（いずれもSystem.Web.UI.HtmlControls名前空間）を利用して、ページ・タイトルやメタ情報をより直感的に操作する方法を紹介する。さっそく具体的な手順を見ていくことにしよう。

1．タイトル／メタ情報管理用のテーブルを作成する

　本稿のサンプル・プログラムを動作させるには、あらかじめ以下のようなPageInfoテーブルを用意しておく必要がある。

フィールド名	データ型	概要
url	VARCHAR(255)	URL（主キー）
title	VARCHAR(50)	ページ・タイトル
keywords	VARCHAR(100)	カンマ区切りのキーワード
description	VARCHAR(255)	ページの概要説明

ページ情報管理用のPageInfoテーブルのフィールド・レイアウト

　また、作成したテーブル内にテスト用のデータとして、仮に以下のデータを入力しておく。もちろん、PageInfoテーブルの内容は適宜、アプリケーション内のページに応じて、追加していけばよい。

フィールド名	値
url	~/Contents.aspx
title	メタ情報の付与
keywords	HtmlTitle, HtmlMeta
description	データベースからメタ情報を付与するには？

ページ情報管理用のPageInfoテーブルのテスト用データ

2．マスター・ページを作成する（1）

　タイトルやメタ情報のような共通的なロジックは、マスター・ページ上で定義するのが好ましい。マスター・ページ作成の詳細な手順については、「TIPS：［ASP.NET］サイト共通のヘッダ／フッタを一元管理するには？」をご参照いただくとして、ここでは最低限、データベースにアクセスするためのSqlDataSourceコントロールを配置しておくものとする（そのほか、デザイン要素については、特に問わない）。

マスター・ページ（Header_cs.master／Header_vb.master）のレイアウト

　SqlDataSourceコントロールのプロパティ設定は、以下のとおりだ。ConnectionStringプロパティに設定した“db”はアプリケーション構成ファイルWeb.configで設定された接続情報名を表すものとする。Web.configへの接続情報の登録については、別稿「無償データベース SQL Server 2005 Express Editionを使ってみよう」などが詳しいので、併せてご参照いただきたい。

プロパティ	値
(ID)	sds
ConnectionString	db
ProviderName	System.Data.SqlClient
SelectQuery	SELECT title, keywords, description FROM PageInfo WHERE (url= @url)
DataSourceMode	DataReader

SqlDataSourceコントロールのプロパティ設定

3．マスター・ページを作成する（2）

　以上の設定ができたら、マスター・ページのPage_Loadイベント・ハンドラを定義する。以下が具体的なコードだ。

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;



public partial class Header_cs : System.Web.UI.MasterPage {

  protected void Page_Load(object sender, EventArgs e) {



    // リクエストURLをキーにPageInfoテーブルからページ情報を取得

    sds.SelectParameters.Add("url",

      Request.AppRelativeCurrentExecutionFilePath);

    System.Data.IDataReader reader =

      (IDataReader)sds.Select(new DataSourceSelectArguments());



    // データベースから情報を取得できた場合のみ

    // タイトル／メタ情報をセット

    if (reader.Read()) {

      Page.Header.Title = reader.GetString(0);

      HtmlMeta meta1 = new HtmlMeta();

      HtmlMeta meta2 = new HtmlMeta();

      meta1.Name = "keywords";

      meta1.Content = reader.GetString(1);

      meta2.Name = "description";

      meta2.Content = reader.GetString(2);

      Page.Header.Controls.Add(meta1);

      Page.Header.Controls.Add(meta2);

    }

  }

}

タイトル／メタ情報を取得するためのマスター・ページ（C#：Header_cs.master）

Partial Class Header_vb

  Inherits System.Web.UI.MasterPage



  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load



    ' リクエストURLをキーにPageInfoテーブルからページ情報を取得

    sds.SelectParameters.Add("url", _

      Request.AppRelativeCurrentExecutionFilePath)

    Dim reader As System.Data.IDataReader = _

      sds.Select(New DataSourceSelectArguments())



    ' データベースから情報を取得できた場合のみ

    ' タイトル／メタ情報をセット

    If reader.Read() Then

      Page.Header.Title = reader.GetString(0)

      Dim meta1 As New HtmlMeta()

      Dim meta2 As New HtmlMeta()

      meta1.Name = "keywords"

      meta1.Content = reader.GetString(1)

      meta2.Name = "description"

      meta2.Content = reader.GetString(2)

      Page.Header.Controls.Add(meta1)

      Page.Header.Controls.Add(meta2)

    End If

  End Sub

End Class

タイトル／メタ情報を取得するためのマスター・ページ（VB：Header_vb.master）

　SqlDataSource.Selectメソッドの利用方法については、連載「Visual Studio 2005でいってみようDBプログラミング第5回開発生産性を向上させるASP.NET 2.0のコントロール」を参照していただくとして、このコードでポイントとなるのは、データベースから読み込んだデータをPage.Headerプロパティに設定している個所（太字）だ。

　Page.Headerプロパティは、ページのHTMLコードの<head>要素をHtmlHeadオブジェクトとして取得する。ページ・タイトルを設定するには、そのTitleプロパティを書き換えればよい。また、メタ情報を設定するには、あらかじめ用意したHtmlMetaオブジェクトを、HtmlHeadオブジェクトのControlsプロパティに対してAddメソッドにより追加すればよい。HtmlMetaクラスは<meta>要素を表現するためのクラスで、Nameプロパティがメタ・プロパティ名を、Contentプロパティが実データを、それぞれ表す。

4．コンテンツ・ページを作成する

　あとは、マスター・ページを適用するためのContents.aspxというファイルを作成すればよい。ここで注目したいのはあくまでマスター・ページの内容なので、Contents.aspxの中身は何でも構わない。

　Contents.aspxを実行し、ブラウザの［ソースの表示］から出力されたHTMLコードを確認してみよう。Contents.aspxのヘッダ部分にデータベース上で管理されたページ・タイトルとメタ情報が反映された、以下のようなHTMLコードを確認できるはずだ。なお、このHTMLコードには見やすいように適宜改行を入れてある。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>メタ情報の付与</title>

<meta name="keywords" content="HtmlTitle, HtmlMeta" />

<meta name="description" content="データベースからメタ情報を付与するには？" />

</head>

<body>

  ……後略……

データベース上で管理されたページ・タイトルとメタ情報が反映されたHTMLコード

　ここではごく基本的な例として、ページ・タイトルやキーワード、ページ概要を管理する例を挙げてみたが、もちろん、タグラインやスタイルシートなどなど、上記のサンプル・プログラムはさまざまなページ単位の情報を管理するために応用できる。ぜひ、ご自分のサイトでも活用してみてほしい。

利用可能バージョン：.NET Framework 2.0のみ
カテゴリ：Webフォーム　処理対象：マスター・ページ
使用キーワード：SqlDataSourceコントロール
使用ライブラリ：HtmlHeadクラス（System.Web.UI.HtmlControls名前空間）
使用ライブラリ：HtmlMetaクラス（System.Web.UI.HtmlControls名前空間）
関連TIPS：［ASP.NET］アプリケーション共通のヘッダ／フッタを追加するには？
関連TIPS：［ASP.NET］サイト共通のヘッダ／フッタを一元管理するには？

この記事と関連性の高い別の.NET TIPS

		［ASP.NET］アプリケーション共通のヘッダ／フッタを追加するには？
		［ASP.NET］サイト共通のヘッダ／フッタを一元管理するには？
		［ASP.NET MVC］ASP.NET MVCでマスター・ページを適用するには？
		［ASP.NET］コンテンツ・ページからマスター・ページの情報に簡単にアクセスするには？
		［ASP.NET］GridViewコントロールでデータソースの内容を表示するには？

このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー）により自動抽出したものです。

generated by

「.NET TIPS」

Insider.NET フォーラム新着記事

第2回　簡潔なコーディングのために （2017/7/26）
　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
第1回　明瞭なコーディングのために （2017/7/19）
　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
Presentation Translator （2017/7/18）
　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える