ブログ（WordPress）のTwitterカードをプラグイン無しで設定する方法

Twitterイメージ

こんにちは、ゆき(@Yuki_no_yabo)です！

ブログの記事の更新通知をTwitterで公開したいのに、周りの人がやっているようなサムネイル付きの表示にならず、URLだけが表示されている…なんてことはありませんか？

下みたいなやつをやりたいのに、自分のはURLしかでない…という方向けに設定方法を解説します！

ちなみにこれはTwitterカード（ツイッターカード）といいます。

Twitterカードとは？設定するメリットは？

Twitterカードは、Twitterでブログの記事のURLを埋め込む際に、サムネイル画像とセットのボタンとして表示されるサービスです。

Twitterカードを設定した場合の表示の違い

事前に自分の持つブログ側で設定しておく必要があります。

Twitterカード登録前に調べておかないといけないこと

Twitterカードの登録は、Wordpressのメタタグ（<head></head＞の中に記述するタグ）にいくつか記述を追加することで実現可能です。

Twitterのデベロッパードキュメントによれば、必要な情報は次の通りです。

メタタグ 説明 設定例
Twitter:card  Twitterカードのタイプ"summary"または"summary_large_image"。  summary
Twitter:site  Twitterのユーザーネーム  @Yuki_no_yabo
og:url 記事のURL 記事毎のURL
og:title  記事のタイトル  記事毎のタイトル
og:description  記事の概要  記事毎の記事の抜粋（description）
og:image  記事のイメージ画像  記事毎のイメージ画像

Twitter:cardはカードの形状を示しています。summaryだと画像が小さめで、summary_large_imageは画像が大きく表示されます。僕が上の画像で使っていたのは、summaryの方です。

Twitter:siteはTwitterのユーザーネームです。あなたのIDを設定してください。

Twitter:titleとTwitter:description、Twitter:imageの3つは記事毎に内容を変更する必要がありますが、こちらを自動的に設定する方法を次に紹介します。

なお、最近のブログテーマであればTwitterカードはおおむね自動的に作成されるようになっていますが、無い場合は次の方法を試してみてください。

WordPressテーマのヘッダーエリアにメタタグを追加する

Twitterカードを設定するには、Wordpressのテーマの中で、これからご紹介するメタタグを追加します。

ブログテーマごとに異なるので、<head></head>内の記述方法については、利用しているテーマでの記述方法を調査してください。

必ず<head></head>タグの中に収まるように追記してください。

尚、個別の記事の中だけにメタタグを追加するようにwordpressの関数であるis_single()で個別の記事かどうかを確認しています。

<?php if(is_single()): ?> 
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@Twitterのユーザ名" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:description" content="<?php 
echo the_exerpt();
 ?>" />
<meta property="og: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; ?>

以下のタグはそのページのタイトルを呼び出しています。

<meta property="og:title" content="<?php the_title(); ?>" />

以下のタグでは、投稿記事の要約を取得しています。

<meta property="og:description" content="<?php 
echo the_exerpt();
 ?>" />

イメージタグはサムネイルを取得するようにしています。サムネイルがない場合には指定した画像を表示するように設定していますが、Twitterも画像がない場合の画像があるので、お好みで。

<meta property="og: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;
?>" />

画像は””の中にhttps://～から始まる画像のフルパスを設定しましょう。

画像のURLは次のように、メディアライブラリの中の対象画像ファイルを選択し、ファイルのURLから取得することができます。

メディアライブラリの画像URLを取得する方法

以上を記述したheader.phpをサーバにアップロードすれば完成です。

Twitterカードが設定できているかを確認する

TwitterのDeveloperサイトにアクセスして、Card validatorで表示内容を確認します。

アクセスすると次のような画面になるので、Card URLの所に確認したい記事のURLを入力しましょう。

Twitter card validator

下記のように表示されれば成功です。画像の反映には時間がかかるので、もし画像が表示されないのであれば暫く待ってからアクセスしましょう。

Twitter cardの設定成功例

あとはツイッターでつぶやくときに、記事URLと伴に呟くだけで上記のようなTwitterカードが自動的に挿入されますよ！(*´ω｀*)

まとめ

最近の最新のWordpressテーマにはTwitterカードの設定はデフォルトで付いているので、中々上記のような設定をすることは少ないかもしれません。

まずはあなたの利用しているテーマでTwitterカードの設定が可能か調べてみてくださいね！

以上っ！

ブログ運営wordpress,Twitter

Posted by 雪