コラム・豆知識
OGPとは何か？Webページの視認性を高める仕組み
OGP（Open Graph Protocol）は、SNS上でWebページがシェアされた際に、適切なタイトルや説明文、サムネイル画像などを表示させるための仕組みです。
HTMLの<head>内にmetaタグを追加することで、情報が正しく反映されます。
OGPチェッカーの役割とメリット
OGPチェッカーは、設定されたog:title、og:description、og:imageなどの値を
正しく取得できているかを確認するツールです。
SNSで意図した表示がされているか事前にチェックでき、リリース前の品質確認に非常に有効です。
画像の扱いとalt属性の注意点
og:imageで指定する画像には、十分な解像度と適切なアスペクト比が求められます。
また、画像自体にはalt属性が存在しない場合でも、視覚障害ユーザーへの配慮として、OGP以外の部分ではimg要素にaltを記述することが重要です。
デバッガーツールとの併用で確実な表示確認を
Facebookの「Sharing Debugger」やX（旧Twitter）の「Card Validator」など、各SNSにはOGPの表示をテストする専用ツールがあります。
OGPチェッカーと併せて活用することで、キャッシュの更新状況や構文エラーの早期発見が可能になります。
実務での運用ポイントと更新フロー
OGPは一度設定して終わりではなく、ページの内容変更に応じて見直しが必要です。
CMS導入時にはテンプレートに組み込むと効率的で、更新漏れを防げます。
変更後は必ずOGPチェッカーで検証し、意図通り表示されるか確認を行いましょう。
ツールの仕組み解説
// CORS回避用のプロキシを経由して、指定したURLのHTMLを取得する
fetchPageContent関数 async function fetchPageContent(url) {
try {
// AllOrigins APIを利用して、CORS制限を回避しながらページを取得
const proxyUrl = `https://api.allorigins.win/get?url=${encodeURIComponent(url)}`;
const response = await fetch(proxyUrl);
const data = await response.json();
if (!data.contents) throw new Error('ページの取得に失敗しました');
return data.contents;
} catch (error) {
console.error('Error fetching page:', error);
throw error;
}
}
ここでは、JavaScriptのfetchで別ドメインのページを取得しようとするとブラウザのセキュリティ制限（CORS）で失敗するため、AllOriginsという無料のCORSプロキシを経由してHTMLを取得しています。これにより外部サイトの内容を安全に読み込み可能です。
// DOMParserを使って取得したHTMLをパースし、メタタグやOGP情報を抽出するextractMetaTags関数
function extractMetaTags(html) {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const data = { title: '', description: '', ogTitle: '',...}
};
// ファビコン取得
const faviconLink = doc.querySelector('link[rel*="icon"]');
if (faviconLink) data.favicon = faviconLink.getAttribute('href');
return data;
取得したHTMLをDOMとして解析し、SEOやSNSで重要なメタタグ（descriptionやOpen Graph、Twitterカード）を抜き出しています。これにより、ユーザーはURL先のSEO情報を簡単にチェック可能になります。
// 相対パスのURLを絶対URLに変換するresolveUrl関数
function resolveUrl(baseUrl, relativeUrl) {
if (!relativeUrl) return '';
if (relativeUrl.startsWith('http')) return relativeUrl;
try {
return new URL(relativeUrl, baseUrl).href;
} catch {
return relativeUrl;
}
}
OG画像やファビコンのURLは相対パスで記述されている場合が多いため、正しく表示できるよう絶対URLに変換します。これがないと画像が表示されないことがあるため必須の処理です。
// ユーザーがURLを入力して「チェック」ボタンを押すと実行されるcheckOGP関数
async function checkOGP() {
const urlInput = document.getElementById('urlInput');
let url = urlInput.value.trim();
if (!url) {
alert('URLを入力してください');
return;
}
if (!url.startsWith('http')) url = 'https://' + url;
// UIを操作して状態をリセット・更新
loadingEl.style.display = 'block';
resultsEl.style.display = 'none';
errorEl.style.display = 'none';
checkBtn.disabled = true;
try {
const html = await fetchPageContent(url);
ogpData = extractMetaTags(html);
ogpData.ogImage = resolveUrl(url, ogpData.ogImage);
ogpData.twitterImage = resolveUrl(url, ogpData.twitterImage);
ogpData.favicon = resolveUrl(url, ogpData.favicon);
displayResults(url);
loadingEl.style.display = 'none';
resultsEl.style.display = 'block';
} catch (error) {
errorEl.innerHTML = `<div class="error">エラーが発生しました: ${error.message}</div>`;
errorEl.style.display = 'block';
loadingEl.style.display = 'none';
} finally {
checkBtn.disabled = false;
}
}
ユーザーが入力したURLのOGP情報を取得し、画面に表示します。ここで入力値の簡単な正規化とエラーハンドリングも行い、操作が分かりやすくなるようUIを制御しています。