note記事のカード形式リンクにサムネイル画像を表示させる方法
noteのカード形式リンクにサムネイル画像が表示されない
noteで記事を作成する際に、自分で運営しているブログサイトの記事をリンクして紹介したい時がありますね。
note記事作成中に自分のブログサイトのURLをコピペしてEnterを押下することで自動的にカード形式のリンクが作成されてブログのサイト名や概要、サムネイル画像などが表示されるのですが、以下画像のようにサムネイル画像が表示されない現象がありました。
OGP（Open Graph Protocol）の設定
サムネイルが表示されない記事は、自分で作成したブログサイトに掲載しているものなのですが、そのサイトはwordpressのテーマを自作（プログラミング）して作成したものでした。
調べた結果、OGP（Open Graph Protocol）の設定が必要なことが分かりました。
そこで自作テーマのphpプログラムのひとつ「header.php」内の<head>～</head>の部分に以下のコードを追加したところ問題が解決してサムネイル画像が表示されるようになりました。
<?php if (is_singular()): ?>
<meta property="og:title" content="<?php echo esc_attr(get_the_title()); ?>" />
<meta property="og:description" content="<?php echo esc_attr(get_the_excerpt()); ?>" />
<meta property="og:url" content="<?php echo esc_url(get_permalink()); ?>" />
<meta property="og:image" content="<?php echo has_post_thumbnail() ? esc_url(get_the_post_thumbnail_url(null, 'full')) : 'https://example.com/default-image.jpg'; ?>" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="<?php echo esc_attr(get_bloginfo('name')); ?>" />
<?php endif; ?>
以下が無事、サムネイル画像が表示されたnoteのカード形式リンクの画像です。
OGP（Open Graph Protocol）の設定方法はheader.phpに追記する方法以外に、
・wordpressのプラグインを使用する
・自作テーマのphpプログラム「functions.php」にコードを追記する
・自作テーマのphpプログラム「page.php」または「single.php」にコードを追記する
などの方法があるようです。
必要に応じて調べて頂ければと思います。
いいなと思ったら応援しよう！
