Twitterカードの設定が反映表示されるまでにやった事

どうも、トッド(Todd)です。

 

Twitterカードの設定が完了して、反映されるようになりました。

「ビフォー」

何もしていない時はこんな感じで表示されていました。↑

以前までは、Twitter投稿画面で記事タイトルを打ち込みテキストリンクを貼り付けてアイキャッチ画像を投稿に添付する方法で投稿していました。

そして、Twitterカードが表示されるようになると以下のようになります▼

「アフター」

Twitterカードを設定するとこんな感じになりました。↑【summary_large_imageバージョン

Twitter投稿画面にてページリンクを貼り付けてつぶやくと理想の表示へ!!

なお、Wordpressのパブリサイズ共有で、アカウントの設定していてもTwitterカードは表示されません。

Twitterの投稿画面で共有したいサイトページのURLを貼り付けた時にTwitterカードは反映されます。

[code_balloon position=”right” name=”MOGAKUN” text=”ただ、ここまでの道のりが長かった…” img=”https://threefrog.com/wp-content/uploads/2018/08/a0557e1b0c7610f938e5a5d5bad0b60c.png”]

 

知識のない人間からすると意味が分からないことが多すぎる作業でしたが、やっと表示されるようになったので、そこまでのレポートが今回のテーマになります。

 

こんな状況の方へオススメ

  • WordPressのサイト
  • FacebookのOGP設定をしていない(ていうか何それ?)
  • WP-プラグイン「Aii in One SEO Pack」の設定で挫折(ていうか、他サイトの説明を見てもプラグインの表示が変わっていて分からない)
  • とりあえずTwitterカードの表示が反映されるようになりたい
  • あぁ~もう無理。なぜ反映してくれないのかも分からない

 色々な方法に振り回されたTwitterカードの設定

Twitterカードでブログで書いた記事を投稿してみたいと思い始めてから、僕はTwitterカードについて調べるところから始めました。

すると、たくさんの情報があり、簡単そうだなと思いながら設定をしていった訳ですが、ここからが迷いの道の始まり。

Twitterカードだけ設定したいのにFacebookありきのOGP

僕は、Twitterカードを設定したいのに何故かFacebookありきのOGP設定済みでのTwitterカード設定の話が多い。

Facebookのアカウントを登録しないとTwitterカードの設定も出来ないものなのかな?という悩みの発生。

しかし、結果的にその悩みは気にすることの無いものになりました。

[adchord]

これをやったら反映されました。

 

  • 自分が使っているWPテーマのheader.php【head~/headの間】にコードをコピペする
  • コピペしたコードに自分のTwitter情報を書き込む
  • Twitterカードデベロッパーcard validatorでちゃんと表示されているかの確認

header.phpにコピペする

下記のソースコードをコピペして使用する時には、必ずバックアップを取ってから使用してください。テーマによって不具合が発生する場合があるかもしれないので・・・
 <!--Twitter Cards-->
<?php
    $_id = get_the_ID();
    $_post = get_post($_id);
    $_content = $_post->post_content;
    $_content = str_replace(array("\r\n", "\r", "\n"), '', $_content);
    $_content = strip_tags($_content);
    $_description = is_front_page() ? get_bloginfo('description') : mb_strimwidth($_content, 0, 100, "...", "utf-8");
    $_thumbnail = wp_get_attachment_url(get_post_thumbnail_id());
?>
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@から始まるユーザー名">
<meta name="twitter:title" content="<?php if (is_front_page()) { bloginfo('name');} else { wp_title('');}?>">
<meta name="twitter:description" content="<?php echo $_description;?>">
<meta name="twitter:image:src" content="<?php echo $_thumbnail;?>">
<meta name="twitter:domain" content="自サイトのURL">
<!--//Twitter Cards-->

こちらを↑header.php(テーマヘッダー)のheadから/headまでの部分にコピペをすることで反映されました。

テーマによって記載する位置は異なる場合があります。

コピペが終わるとそれぞれ変更してもらう箇所があります。

1.<meta name=”twitter:card” content=”summary”>

Twitterカードを表示するときの種類の設定になります。コピペ時のデフォルトではsummaryになっています。

「summary」

contentから始まるところをsummaryにすると上記の表示になります。↑

「summary_large_image」

contentから始まるところをsummary_large_imageにすると上記の表示になります。

 

2.<meta name=”twitter:site” content=”@から始まるユーザー名”>

自分のTwitterのユーザーネームに変更してください。@マークを忘れないようにしましょう。

これも、変更するところはcontent=”@○○○”のところになります。

 

3.<meta name=”twitter:domain” content=”自サイトのドメイン”>

こちらは、自分のサイトのドメイン名に変更してください。

 

これも、変更するところはcontent=”@○○○”のところになります。

 

反映されているかの確認

上記のコードをコピペして変更箇所を変えた後、Twitterカードがちゃんと機能するようになっているのか?を確認するために投稿に載せたいサイトページURLをTwitter DevelopersにあるCard Validatorに記入して確認します。↓

Card Validator

こちらに自サイトのURLを記入して以下のような表示なれば完了です。

 

まとめ

当ブログは、STINGER8を使用していましたが、最近WordpressテーマをFitさんが公開している『LION MEDIA』変更しました。

『LION MEDIA』ではここで紹介した、OGP設定に関するソースコードなどの編集を行わなくても簡単にTwitterカードを表示させるための設定が出来るのでオススメです。

上記に記載されているコードをコピペすることでTwitterカードの表示が反映されるようになりました。

Card Validatorでは、

Twitterカードに申請を出すみたいなことは無く、確認ツールのような感覚で使用することが出来ました。

FacebookのOGP設定のついでにTwitterカードみたいな話が多く、苦労しました。

最後まで読んでいただき有難うございました。

 

コメントを残す

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