総合 ゲーム 画像動画

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で動的に生成させましょう。

使いそうな関数

  1. echo get_the_title();
  2. echo get_permalink();
  3. get_post_thumbnail_id();
  4. 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を入力してプレビューを押すと結果が表示されます。

 

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

小さいと左右が切り取られたりするのがアレなので大きいほうが良いですかね。

たくさんツイートする場合は受け取り手のタイムラインに配慮して小さい方を使うことも検討した方が良いでしょう。

ツイッターで表示される画像はツイッターが取得して変換したもので、ツイッターのサーバー上にあるのでたくさんリツイートされても自分のサイトへ大きな負荷がかかることはないです。

 

コメントを残す。

メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。URLを含むコメントは承認待ちになります。