【WEBデザイン】PHPで内部リンクのブログカードを実装したときのメモ

よく考えてみると、JavaScriptでブログカードを生成するのはSEO的によくないのではないか・・・と今さらながら気付きました。クローラーが認識できないのでは？と思ったのです。
このブログではPHPが使用できるため、PHPを使ってブログカードを出力するように変更しました。これにより、クローラーが内部リンクを認識できるはずなので、SEO対策につながると思います。

429（Too Many Requests）エラーが発生しまくったためキャッシュを作って参照するようにして、一定期間期間リクエストしないようにしています。OGPデータを取得して、決まった形式で出力するようにしました。

<?php 
function get_ogp_data($url) {
    $cache_dir = 'blogcardcache'; // キャッシュディレクトリ
    if (!is_dir($cache_dir)) {
        mkdir($cache_dir, 0777, true); // ディレクトリが存在しない場合は作成
    }

    $cache_file = $cache_dir . '/' . md5($url) . '.json'; // キャッシュファイルのパス
    $cache_time = 3600; // キャッシュの有効期限（秒）

    // キャッシュが存在し、有効期限内であればキャッシュを返す
    if (file_exists($cache_file) && (time() - filemtime($cache_file) < $cache_time)) {
        return json_decode(file_get_contents($cache_file), true);
    }

    // OGPデータを取得
    $html = @file_get_contents($url);
    if ($html === false) {
        return []; // エラーが発生した場合は空の配列を返す
    }

    $doc = new DOMDocument();
    @$doc->loadHTML($html);
    
    $ogp_data = [];
    $meta_tags = $doc->getElementsByTagName('meta');
    
    foreach ($meta_tags as $meta) {
        if ($meta->getAttribute('property') === 'og:title') {
            $ogp_data['title'] = $meta->getAttribute('content');
        }
        if ($meta->getAttribute('property') === 'og:description') {
            $ogp_data['description'] = $meta->getAttribute('content');
        }
        if ($meta->getAttribute('property') === 'og:image') {
            $ogp_data['image'] = $meta->getAttribute('content');
        }
    }

    // OGPデータをキャッシュファイルに保存
    if (file_put_contents($cache_file, json_encode($ogp_data)) === false) {
        error_log("Failed to write cache file: " . $cache_file);
    }

    return $ogp_data;
}

function display_ogp_as_blog_cards($urls) {
    echo '<div class="blog-card-container">'; // コンテナの開始

    foreach ($urls as $url) {
        $ogp_data = get_ogp_data($url); // OGPデータを取得する関数

        if (!empty($ogp_data)) {
            // OGP情報が取得できた場合
            echo '<a href="' . htmlspecialchars($url) . '" class="blog-card">';
            echo '<div class="inner">';
            echo '<div class="frame">';
            echo '<img src="' . htmlspecialchars($ogp_data['image']) . '" alt="' . htmlspecialchars($ogp_data['title']) . '">';
            echo '</div>';
            echo '<div class="blog-information">';
            echo '<span class="blog-card-title">' . htmlspecialchars($ogp_data['title']) . '</span>';
            echo '<span class="blog-card-description">' . htmlspecialchars($ogp_data['description']) . '</span>';
            echo '</div>';
            echo '</div>';
            echo '</a>';
        } else {
            // OGP情報が取得できなかった場合
            echo '<a href="null" class="blog-card">';
            echo '<div class="inner">';
            //echo '<div class="frame">';
            //echo '<img src="" alt="タイトルが取得できませんでした">';
            //echo '</div>';
            echo '<div class="blog-information">';
            echo '<span class="blog-card-title">タイトルが取得できませんでした</span>';
            echo '<span class="blog-card-description">説明が取得できませんでした</span>';
            echo '</div>';
            echo '</div>';
            echo '</a>';
        }
    }

    echo '</div>'; // コンテナの終了
}
?>

使い方

ブログカードを表示したい箇所には、以下のようなコードを記載します。

<?php
$urls = [
'https://example.com/diary001.php',
];
display_ogp_as_blog_cards($urls);
?>

複数のブログカードを同じ箇所に表示したい場合は、次のように記載します。

<?php
$urls = [
'https://example.com/diary001.php',
'https://example.com/diary002.php',
];
display_ogp_as_blog_cards($urls);
?>

出力結果

このようにブログカードが表示されるようになりましたとさ。

Fatal error: Uncaught Error: Call to undefined function display_ogp_as_blog_cards() in /home/gomwo/560days.com/public_html/lab/2025/01/003662.php:263 Stack trace: #0 {main} thrown in /home/gomwo/560days.com/public_html/lab/2025/01/003662.php on line 263