メタタグ・OGP 情報の収集

HtmlAgilityPack（以下 HAP）における「よくあるユースケース」の一つに、「メタタグ・OGP 情報の収集」があります。これは、WebページからSEOやSNS連携に利用されるメタ情報（<meta> タグ）を抽出する処理です。以下に、この用途に関する詳細な解説を示します。

メタタグ・OGP情報の収集とは

Webページ内の <head> セクションには、HTMLのメタ情報が多く含まれており、以下のような用途に使われます：

  • SEO向け：<meta name="description" content="..."> など

  • OGP（Open Graph Protocol）向け：<meta property="og:title" content="..."> など

  • Twitterカード対応：<meta name="twitter:card" content="..."> など

HAP を用いることで、これらの情報を簡単に抽出・分析できます。

処理の流れ

  1. HTMLの読み込み
    文字列、ファイル、URLなどから HTML ドキュメントを読み込みます。

  2. XPath や LINQ によるメタタグの抽出
    <meta> 要素を対象に、name または property 属性、および content 属性を取得します。

  3. OGP形式（og:〜）、Twitter形式（twitter:〜）の分類
    取得した情報を種別ごとに整理します。

コード例（基本的なメタ情報の取得）

csharp
var web = new HtmlWeb();
var doc = web.Load("https://example.com");

var metaTags = doc.DocumentNode.SelectNodes("//meta");

if (metaTags != null)
{
    foreach (var tag in metaTags)
    {
        var name = tag.GetAttributeValue("name", null);
        var property = tag.GetAttributeValue("property", null);
        var content = tag.GetAttributeValue("content", null);

        if (!string.IsNullOrEmpty(name))
        {
            Console.WriteLine($"name: {name} / content: {content}");
        }
        else if (!string.IsNullOrEmpty(property))
        {
            Console.WriteLine($"property: {property} / content: {content}");
        }
    }
}

よく使われるOGP／Twitterの例

タイプ 属性名 用途例
OGP og:title ページタイトル
OGP og:description ページ概要
OGP og:image サムネイル画像URL
Twitter twitter:card カードの種類（summary など）
Twitter twitter:title タイトル
Twitter twitter:description 概要

応用例

  • ニュースサイトやブログ記事のサマリ情報の収集

  • SNS共有時のメタ情報自動抽出

  • SEO監視ツールのクローラバックエンド実装

  • メタ情報の欠損チェックや自動補完処理

注意点

  • <meta> タグは <head> 外に記述されていることもあるため、XPathは //meta として広く探索するのが安全です。

  • 属性の存在チェックを確実に行わないと null による例外が発生するため、GetAttributeValue() のデフォルト値指定が推奨されます。

このように、HtmlAgilityPackを用いることで、HTMLドキュメントからSEO・SNS連携に不可欠なメタ情報を自動的に抽出・活用する処理を簡潔に実装できます。特にOGPやTwitterカードなどの規格化された属性構成に着目すれば、再利用性の高い解析ロジックを構築することが可能です。

ChatGPT4o 生成日：2025/06/23