Wordpress : Twitter Card画像のぼやけ

Question

こんばんは、Wordpress初心者です。

ブログ(Wordpress)のサムネイル画像をTwitterで表示させる際に画像がぼやけてしまいます。
解決方法をご存知の方がいらっしゃいましたらご教授いただけますと幸いです。

Wordpressのサムネイル画像をそのまま引用しているため
Twitterで大きく表示させる際にぼやけてしまうのでしょうか...？

該当URL
・ブログ： http://availability89.com/
・Twitter： https://twitter.com/naosukenya

★メタ部コード(header.php)

<!-- header -->

  <header itemscope itemtype="http://schema.org/WPHeader">
    <div id="header" class="clearfix">
      <div id="header-in">

		  
		  <?php if(is_single()): ?> 

<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@naosukenya" /> <meta name="twitter:title" content="<?php the_title(); ?>" /> <meta name="twitter:description" content="<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>" />

<meta name="twitter:image" content="<?php if(has_post_thumbnail( $post->ID )): $thumbnail_id = get_post_thumbnail_id(); $thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , 'thumbnail' ); echo $thumbnail_img[0]; else: echo ""; endif; ?>" />

		  <?php endif; ?>			  
        <?php //カスタムヘッダーがある場合
        // $h_top_style = '';
        // if (get_header_image()){
        //   $h_top_style = ' style="background-image:url('.get_header_image().')"';
        // } ?>
        <div id="h-top"<?php //echo $h_top_style; ?>>
          <?php get_template_part('button-menu'); //モバイルメニューボタンの呼び出し?>

          <div class="alignleft top-title-catchphrase">
            <?php get_template_part('header-logo');?>
          </div>

          <div class="alignright top-sns-follows">
            <?php  if ( is_top_follows_visible() ): //トップのフォローボタンを表示するか?>
            <?php get_template_part('sns-pages'); //SNSフォローボタンの呼び出し?>
            <?php endif; ?>
          </div>

        </div><!-- /#h-top -->
      </div><!-- /#header-in -->
    </div><!-- /#header -->
  </header>

Comments

[CHERRY]

元画像のサイズはいくつでしょうか？

[Naokoro]

上記の画像は1018 × 836となっております！

[yoshinavi]

サムネイル画像が引き伸ばされてるので、Twitter Card用の画像の準備と、メタ部でTwitter Cardをキチンと設定をすれば良いのでは？

[Naokoro]

上記の通りメタ部のコードを更新しました。結果、最新記事は画像のぼやけがなくなりましたがそれ以前の画像はぼやけたままです。こちらは時間の経過とともに改善されますでしょうか？

[Naokoro]

画面がまっしろになってしまったので再度コードを修正いたしました。。

Answer 1

カード用のイメージ画像のサイズは「W1200px - H630px」が推奨される大きさになりますので、用意されると良いかと思います。

設定確認：
【2018年版】Twitterカードとは？使い方と設定方法まとめ

---

ツイッターカードの設定後に、以下のリンク先で、表示させるページのURLを入れて確認して見てください。

Twitter表示確認：
Twitter Card validator

Comments

[Naokoro]

ご回答いただきありがとうございました！無事に修正できました????

[yoshinavi]

ツイッターの場合、カードの設定があれば、訴求力がUPしますので、解決されて何よりです。
(^^)