アフィリエイト系ブログでは、「ブログカード」と呼ばれるリンク表示形式がよく使われています。これは内部リンクの推薦コンテンツを読者に展示して、訪問者に「もっと読みたい」と思ってもらうための効果的なテクニックです。ただ、WordPressを使用していればプラグインもあると思いますが、プラグインがない場合は自力で実装する必要があります。そこでJavaScriptを使って内部リンクのURLからOGP情報を取得し、ブログカードを生成する機能を実装することにしました。
ブログカードとは、リンク先のページタイトルや概要、サムネイル画像をカード形式で表示するリンクのことです。視覚的に見やすく、読者がリンクをクリックしやすくなるのが特徴です。
JavaScript
JavaScriptは別ドメインのデータを取得するときに、CORS制約の関係で負担がかかりますが、自分のサイトなら問題がありません。OGPのメタ情報を利用して表示をさせます。
<script>
async function fetchOGP(url) {
try {
const response = await fetch(url);
const text = await response.text();
const parser = new DOMParser();
const doc = parser.parseFromString(text, 'text/html');
const title = doc.querySelector('meta[property="og:title"]')?.content || 'タイトルが取得できませんでした';
const description = doc.querySelector('meta[property="og:description"]')?.content || '説明が取得できませんでした';
const image = doc.querySelector('meta[property="og:image"]')?.content || '';
return { title, description, image };
} catch (error) {
console.error('OGP情報の取得に失敗しました:', error);
return null;
}
}
function createBlogCard(ogp, url) {
const link = document.createElement('a');
link.href = url; // リンク先のURLを設定
link.className = 'blog-card'; // クラス名を設定
//link.target = '_blank'; // 新しいタブで開く
const innerDiv = document.createElement('div');
innerDiv.className = 'inner';
const frameDiv = document.createElement('div');
frameDiv.className = 'frame';
const img = document.createElement('img');
img.src = ogp.image;
img.alt = ogp.title;
const blogInfoDiv = document.createElement('div');
blogInfoDiv.className = 'blog-information';
const title = document.createElement('span');
title.className = 'blog-card-title';
title.textContent = ogp.title;
const description = document.createElement('span');
description.className = 'blog-card-description';
description.textContent = ogp.description;
// 構造を組み立てる
frameDiv.appendChild(img);
blogInfoDiv.appendChild(title);
blogInfoDiv.appendChild(description);
innerDiv.appendChild(frameDiv);
innerDiv.appendChild(blogInfoDiv);
link.appendChild(innerDiv);
return link; // リンクを返す
}
async function displayBlogCards() {
const containers = document.querySelectorAll('.blog-card-container');
for (const container of containers) {
const url = container.getAttribute('data-url');
const ogp = await fetchOGP(url);
if (ogp) {
const card = createBlogCard(ogp, url); // URLを渡す
container.appendChild(card);
}
}
}
// ブログカードを表示
displayBlogCards();
</script>HTML
ブログカードを挿入したい箇所に<div>タグを配置します。このタグのdata-url属性に、リンク先のURLを設定します。
<div class="blog-card-container" data-url="https://560days.com/diary/2025/01/003638.php"></div>このようなコードが表示されます。自分のサイトに合わせているので構造が少し複雑ですが・・・。
<div class="blog-card-container" data-url="https://560days.com/diary/2025/01/003638.php">
<a href="https://560days.com/diary/2025/01/003638.php" class="blog-card">
<div class="inner">
<div class="frame">
<img src="https://560days.com/diary/photo/h2025-01-12-001.jpg" alt="トリプルモニター環境を更新。28インチ4Kモニターを導入 | 閑雲録">
</div>
<div class="blog-information">
<span class="blog-card-title">トリプルモニター環境を更新。28インチ4Kモニターを導入 | 閑雲録</span>
<span class="blog-card-description">トリプルモニター環境をアップデート。秋葉原で購入した28インチUHDモニターにより、作業環境が大幅に改善。</span>
</div>
</div>
</a>
</div>複数設定可能も可能です。
<div class="blog-card-container" data-url="https://560days.com/diary/2025/01/003638.php"></div>
<div class="blog-card-container" data-url="https://560days.com/diary/2025/01/003646.php"></div>機能追加成功
こんな感じで内部リンクのブログカードを簡単に設定することが出来るようになりました。
めでたしめでたし。