SNSでの見栄えと信頼性を両立する設計思想と実装方法

はじめに

SNSで記事をシェアしたとき、「画像が出ない」「タイトルが変」「説明が古いまま」…そんな経験はありませんか？
その原因の多くは、OGPタグやTwitterカードの設定ミスにあります。

この記事では、WordPressでOGPとTwitterカードを正しく・効率的に設定する方法を、設計思想から丁寧に解説します。
SNSでの見栄えを整え、信頼されるシェア体験を実現しましょう。

1. OGPとTwitterカードの基本構造と違い

✔ OGPタグとは？

OGP（Open Graph Protocol）は、FacebookやLINE、Slackなどで使用される共通メタタグ仕様です。
ページのタイトル・説明文・画像URLなどを <head> 内に記述することで、SNSでシェアされた際にリッチな表示を実現します。

<meta property="og:title" content="記事タイトル">
<meta property="og:description" content="記事の説明文">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">

✔ Twitterカードとは？

Twitterが独自に提供するメタタグ仕様で、ツイート内でリッチコンテンツを表示するために使用されます。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="記事タイトル">
<meta name="twitter:description" content="記事の説明文">
<meta name="twitter:image" content="https://example.com/image.jpg">

2. SNSでの表示を左右する「よくある設定ミス」

ミス内容解説
相対URLの使用SNSは絶対URL（https://〜）でないと画像を読み込めません
画像サイズが小さいFacebookは1200×630px以上、Twitterは1200×675px以上が推奨
固定のタイトル・説明文投稿ごとに動的に出力しないと、魅力が伝わりません
twitter:card が未設定Twitterでカードが表示されず、ただのリンクになります
SNSキャッシュの影響設定変更後も古い情報が表示されることがあります

3. WordPressでの正しい設定方法（コード例あり）

✔ functions.php に関数を定義

function get_og_image_url() {
    if (is_singular() && has_post_thumbnail()) {
        return get_the_post_thumbnail_url(get_queried_object_id(), 'full');
    }
    return get_template_directory_uri() . '/assets/images/default-ogp.jpg';
}

function get_seo_description() {
    $site_description = get_bloginfo('description');
    if (is_singular()) {
        global $post;
        if (has_excerpt($post->ID)) {
            return wp_strip_all_tags(get_the_excerpt($post->ID));
        } else {
            return wp_trim_words(wp_strip_all_tags($post->post_content), 30, '…');
        }
    }
    return $site_description;
}

✔ head.php にタグを出力

<meta property="og:title" content="<?php echo esc_attr(wp_get_document_title()); ?>">
<meta property="og:description" content="<?php echo esc_attr(get_seo_description()); ?>">
<meta property="og:image" content="<?php echo esc_url(get_og_image_url()); ?>">
<meta property="og:url" content="<?php echo esc_url(get_permalink()); ?>">
<meta property="og:type" content="<?php echo is_singular() ? 'article' : 'website'; ?>">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<?php echo esc_attr(wp_get_document_title()); ?>">
<meta name="twitter:description" content="<?php echo esc_attr(get_seo_description()); ?>">
<meta name="twitter:image" content="<?php echo esc_url(get_og_image_url()); ?>">

4. SNSでの表示確認とキャッシュ対策

ツール目的
Facebook Sharing DebuggerOGPの表示確認とキャッシュクリア
Twitter Card ValidatorTwitterカードの表示確認とキャッシュクリア

5. まとめ：SNSで信頼される記事にするために

OGPとTwitterカードは、SNSでの見栄えと信頼性を左右する重要な要素です。

WordPressでは、関数化による動的出力が最も効率的で、保守性も高いです。

SNSでの表示確認とキャッシュ対策も忘れずに行いましょう。

また、OGPやTwitterカードの設定について不明点があれば、お気軽にお問い合わせください。
Webサイトの信頼性向上やSNSの活用方法に関して、専門的なサポートを提供しています。あなたのWeb開発を、設計思想からサポートいたします。