URLをツイートした時にTwitterカードに大きな画像（サムネイル）を表示させる方法 WordPress

これはサイト運営者、開発者向けの内容です。自分が管理していないサイトのサムネイルサイズを変更したりする方法ではありません。

サイトを運営している人は少なからずSEO対策を行っているはずです。

そこでいくつかメタデータをヘッダー内に埋め込んでいると思いますが、各種SNSへの対策もしておくと良いです。

今回はツイッターでの表示のされ方を変更します。少しメタタグを追加するだけなので簡単です。

<head>~</head>内に追加します。

<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="ページの説明">
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="表示させたい画像（サムネイル）のURL">
<meta property="og:site_name" content="サイトの名前">
<meta name="twitter:card" content="summary_large_image">

最後の<meta name=”twitter:card” content=”summary_large_image”>の部分がカードに表示される画像サイズの設定です。これを追加しないとデフォルトで小さいサイズが表示されるようになります。

ページのタイトルやURLはPHPで動的に生成させましょう。

使いそうな関数

echo get_the_title();
echo get_permalink();
get_post_thumbnail_id();
wp_get_attachment_image_src($image_id, true);

1つ目はページのタイトルを取得して出力する。

2つ目はページのURLを取得して出力する。

3つ目はページのサムネイルのIDを取得する。

4つ目はサムネイルIDからサムネイルのデータを配列で取得する。関数リファレンス/wp get attachment image

という感じです。実際に私が使っているコードを例に紹介しておきます。

<meta property="og:title" content="<?php echo get_the_title(); ?> | hyperT'sブログ" />
<meta property="og:description" content="<?php echo get_the_title(); ?>の記事ページ" />
<meta property="og:url" content="<?php echo get_permalink(); ?>" />

<?php
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id, true);
?>

<meta property="og:image" content="<?php echo $image_url[0]; ?>" />
<meta property="og:site_name" content="hyperT'sブログ" />

メタコードが上手く機能しているか？を確かめるにはツイッターのカードテストで確かめることができます。

https://cards-dev.twitter.com/validator

自分のサイト、記事ページのURLを入力してプレビューを押すと結果が表示されます。

上手く設定できていれば大きな画像が表示されます。