はじめに
Webサイトの運営やSEO対策において、ページのタイトル、メタディスクリプション、H1見出し、そしてSNSシェア時に表示されるOGPタグが正しく設定されているかを確認する作業は欠かせません。しかし、毎回ブラウザの「ページのソースを表示」を開いて手動で探したり、専用の重い診断ツールを通したりするのは少し手間に感じることがあります。
「ブラウザからURLを入力するだけで、必要なSEOメタタグを一覧でサクッと確認したい」
といった日常のちょっとした手間に応えるため、「指定したURLのHTMLを cURL で取得し、DOMXPath を用いて主要なメタタグや見出しを瞬時に抽出・可視化できる軽量ツール」を開発しました。
本記事では、開発したツールの概要と、文字コードの自動判定やDOM解析を安全に行うためのPHPでの実装ポイントについて紹介します。
作ったツール
メタタグ（SEO）チェッカー
👉 https://ss-infra.net/meta-checker/
主な機能
- 主要SEOタグの一括抽出: Title、Description、H1見出しをまとめて取得し、それぞれの文字数も同時にカウント
- OGPタグの網羅的な確認: og:title、og:description、og:image などのSNS拡散に必須のタグ情報を正確に取得
- 文字コードの自動検出・変換: さまざまな文字エンコーディングで作られたページでも文字化けせずに解析
開発の背景と抱えていた課題
自社サイトやクライアントサイトの公開前チェック、あるいは競合サイトの構造調査において、「いま設定されているメタタグの文字数や内容をパッと確認したい」というシーンは頻繁にあります。外部の複雑なクローラーツールを使うまでもなく、シンプルかつ高速にブラウザ上で確認を完結させたいと考え、本ツールの開発に至りました。
技術的なポイント：安全かつ柔軟なHTML解析を実現するPHP実装
PHPの cURL で対象URLのHTMLを取得し、マルチバイトの文字コード補正や DOMDocument と DOMXPath を組み合わせた堅牢なスクレイピング処理を実装しています。
1. cURLによる安全なHTML取得と文字コード補正
最大リダイレクト数やタイムアウトを設定して安全にHTMLを取得し、サイトごとに異なる文字コード（UTF-8、Shift-JIS、EUC-JPなど）を自動検出して UTF-8 へ統一することで、文字化けを防いでいます。
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_MAXREDIRS, 5);
curl_setopt($ch, CURLOPT_TIMEOUT, 5);
curl_setopt($ch, CURLOPT_USERAGENT, 'SS-Infra-MetaChecker/1.0 (+https://ss-infra.net/)');
$html = curl_exec($ch);
$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
if ($html === false || $http_code >= 400) {
$error = "URLへの接続に失敗しました（HTTPステータスコード: {$http_code}）。";
} else {
// 文字コードの自動検出とUTF-8変換
$encoding = mb_detect_encoding($html, ['UTF-8', 'SJIS-win', 'EUC-JP', 'ASCII'], true);
if ($encoding && $encoding !== 'UTF-8') {
$html = mb_convert_encoding($html, 'UTF-8', $encoding);
}
}
2. DOMXPathによる正確なメタタグ・見出しの抽出
取得したHTMLを DOMDocument で読み込み、DOMXPath を利用して大文字小文字の揺れ（property や name 属性の違いなど）を吸収しながら、必要なメタタグやH1要素を確実に抽出しています。
libxml_use_internal_errors(true);
$dom = new DOMDocument();
@$dom->loadHTML($html);
libxml_clear_errors();
$xpath = new DOMXPath($dom);
// Title取得
$title_nodes = $xpath->query('//title');
$title = ($title_nodes->length > 0) ? trim($title_nodes->item(0)->nodeValue) : '未設定';
// Meta Description取得
$desc_nodes = $xpath->query('//meta[translate(@name, "DESCRIPTION", "description")="description"]/@content');
$description = ($desc_nodes->length > 0) ? trim($desc_nodes->item(0)->nodeValue) : '未設定';
// H1タグの取得
$h1_nodes = $xpath->query('//h1');
$h1_list = [];
foreach ($h1_nodes as $h1) {
$h1_list[] = trim($h1->nodeValue);
}
$h1_text = !empty($h1_list) ? implode(' / ', $h1_list) : '未設定';
おわりに
WebページのメタタグやSEO構成を手軽にチェックしたいときは、ぜひ使ってみてください！
ご意見・改善のご要望などがあれば、ぜひQiitaのコメント欄やフィードバックでお知らせいただけると嬉しいです！