WordPress（SWELLテーマ）でプラグインなし！リンクを貼るだけでOGPカードを自動表示する方法

WordPressで外部リンクを貼るとき、TwitterやFacebookのように「カード型」でタイトルや画像、説明文が自動で表示されたら便利ですよね。特にSWELLテーマを使っている方は、サイトのデザイン性を損なわず、手軽にOGP（Open Graph Protocol）カードを表示したいと考える方も多いはずです。

この記事では、プラグインを使わずにfunctions.phpへコードを追加するだけで、リンク先のOGP情報（タイトル・画像・説明）を自動取得し、埋め込みカード風に表示する方法を、初心者にもわかりやすく解説します。SWELLテーマとの相性や注意点、カスタマイズのコツまで、実践的な内容を丁寧にまとめました。

---

OGPカードとは？なぜ必要？

OGP（Open Graph Protocol）カードとは、Webページのタイトル・説明・画像などの情報を、SNSやブログ記事内で「カード型」に表示する仕組みです。
たとえば、TwitterやFacebookでURLを貼ると、下記のようなカードが自動生成されます。

• 見た目がリッチでクリック率アップ
• リンク先の内容が一目で伝わる
• サイトの信頼性やデザイン性が向上

WordPressでも同じように、外部リンクを貼るだけでOGPカードを自動表示できれば、記事の見栄えやユーザビリティが大きく向上します。

---

JavaScriptだけでOGP情報を取得できない理由

「JavaScriptで外部サイトのOGP情報を取得できないの？」と疑問に思う方もいるかもしれません。しかし、JavaScriptだけで外部サイトのOGP情報を直接取得することは、CORS（クロスオリジンリソースシェアリング）制限のため基本的にできません。

CORSとは、セキュリティ上の理由から、ブラウザが他のドメインのデータ取得を制限する仕組みです。そのため、サーバーサイド（PHP）で情報を取得し、HTMLに埋め込む方法が現実的です。

---

PHPでOGP情報を取得する関数を作成

まずは、WordPressのfunctions.phpにOGP情報を取得する関数を追加します。
この関数は、指定したURLのHTMLを取得し、OGPタグ（og:title、og:description、og:image）を抽出します。

// functions.phpに追加
function get_ogp_data($url) {
    $html = @file_get_contents($url);
    if (!$html) return false;

    $doc = new DOMDocument();
    @$doc->loadHTML($html);

    $xpath = new DOMXPath($doc);

    $ogp = [
        'title' => '',
        'description' => '',
        'image' => '',
        'url' => $url
    ];

    // OGPタグを取得
    foreach (['title', 'description', 'image'] as $prop) {
        $meta = $xpath->query("//meta[@property='og:{$prop}']");
        if ($meta->length > 0) {
            $ogp[$prop] = $meta->item(0)->getAttribute('content');
        }
    }

    // titleタグの補完
    if (empty($ogp['title'])) {
        $title = $doc->getElementsByTagName('title');
        if ($title->length > 0) {
            $ogp['title'] = $title->item(0)->nodeValue;
        }
    }

    return $ogp;
}

コードのポイント

• file_get_contents()でURLのHTMLを取得
• DOMDocumentとDOMXPathでOGPタグを抽出
• OGPタグがない場合は<title>タグで補完

---

ショートコードでOGPカードを表示する

次に、ショートコードを使って記事内にOGPカードを表示できるようにします。
以下のコードをfunctions.phpに追加してください。

// functions.phpに追加
function ogp_card_shortcode($atts) {
    $atts = shortcode_atts(['url' => ''], $atts);
    if (empty($atts['url'])) return '';

    $ogp = get_ogp_data($atts['url']);
    if (!$ogp) return '';

    ob_start();
    ?>
    <div class="ogp-card" style="border:1px solid #ccc;display:flex;max-width:500px;">
        <?php if ($ogp['image']): ?>
            <div style="flex:0 0 120px;">
                <img src="<?php echo esc_url($ogp['image']); ?>" alt="" style="width:120px;height:auto;">
            </div>
        <?php endif; ?>
        <div style="padding:8px;">
            <a href="<?php echo esc_url($ogp['url']); ?>" target="_blank" rel="noopener">
                <strong><?php echo esc_html($ogp['title']); ?></strong>
            </a>
            <p style="font-size:90%;color:#555;"><?php echo esc_html($ogp['description']); ?></p>
        </div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('ogp_card', 'ogp_card_shortcode');

コードのポイント

• [ogp_card url="https://example.com"]のように使える
• OGP情報が取得できない場合は何も表示しない
• シンプルなカードデザイン（CSSでカスタマイズ可能）

---

投稿や固定ページでの使い方

WordPressの投稿や固定ページで、以下のようにショートコードを記述するだけでOKです。

[ogp_card url="https://example.com"]

SWELLテーマのブロックエディタでも、「ショートコード」ブロックを使えば同じように表示できます。

---

SWELLテーマとの相性・カスタマイズ

SWELLテーマは、ブロックエディタとの親和性が高く、ショートコードも問題なく使えます。
ただし、デザインをよりサイトに合わせたい場合は、CSSでカスタマイズするのがおすすめです。

例：CSSでOGPカードをカスタマイズ

.ogp-card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    background: #fff;
    overflow: hidden;
    margin: 16px 0;
}
.ogp-card img {
    border-radius: 8px 0 0 8px;
    object-fit: cover;
}
.ogp-card a {
    color: #333;
    text-decoration: none;
}
.ogp-card a:hover {
    text-decoration: underline;
}

このCSSを「外観」→「カスタマイズ」→「追加CSS」に貼り付ければ、より洗練されたカードデザインになります。

---

注意点・よくある質問

1. サーバー設定による制限

• file_get_contents()で外部URLを取得するには、サーバーの「allow_url_fopen」設定がONである必要があります。
• レンタルサーバーによってはセキュリティ上OFFになっている場合もあるので、動作しない場合はサーバー管理画面で確認しましょう。

2. OGP情報が取得できない場合

• サイトによってはOGPタグが設定されていない場合があります。
• その場合は、<title>タグのみ取得されます。

3. サーバー負荷・著作権への配慮

• 外部サイトのHTMLを取得するため、大量のリンクを一度にカード化するとサーバー負荷が高まる可能性があります。
• 画像やテキストの著作権にも注意し、必要に応じて引用元を明記しましょう。

4. キャッシュの活用

• 毎回外部サイトにアクセスするのは効率が悪いため、WP Transient APIなどでキャッシュを実装するとさらに快適です。
• 初心者の方はまずシンプルな実装から始め、必要に応じてキャッシュ機能を追加しましょう。

---

まとめ

WordPress（SWELLテーマ）で、プラグインを使わずにOGPカードを自動表示する方法を解説しました。
functions.phpにPHPコードを追加し、ショートコードで呼び出すだけで、外部リンクのタイトル・画像・説明を自動取得し、カード型で表示できます。

• JavaScriptだけではCORS制限で取得不可。PHPで取得が必須
• functions.phpにOGP取得関数とショートコードを追加
• SWELLテーマでもショートコードで簡単に使える
• デザインはCSSで自由にカスタマイズ可能
• サーバー設定や著作権、負荷に注意

この方法を使えば、記事の見栄えやユーザビリティが大きく向上します。
ぜひご自身のWordPressサイトで試してみてください。