WordPress

【とても簡単】Yoast SEOを使ってTwitterカードを表示させる方法

投稿日:

Twitterにブログ投稿へのリンクをブログカードの形式で表示させる方法があります。(これをTwitterカードと言います)この設定をするのにYoast SEOが使えます。そしてとても簡単です。Twitterでブログ投稿へのリンクを載せるなら、目立った方が良いですよね?本稿では、Twitterカードをツイートする手順を説明します。

twitter-image

Yoast SEOは初心者に向いているなぁと再認識しました。

<スポンサーリンク>

1. なぜTwitterとYoast SEOが関係あるのか?

Twitterにブログカード(以降はTwitterカードと言います)を表示させるにはTwitter用のメタタグを投稿に入れ込まなければなりません。

そしてYoast SEOにはTwitter用のメタタグを入れ込む機能があるのです。

きちんと手順を踏めば、このようにTwitterカードを使ったツイートができます。

twitter-card-sample

Yoast SEOを使っているならば、Twitter用のメタタグについて細かく知る必要は全くありません。”メタタグをYoast SEOで入れている”という認識があればそれだけで良いです。Yoast SEOを使用されてない場合は以下の投稿を参考にしてください。

Yoast SEOの設定はこちらから。

初心者におすすめする理由はこちらから。

見る必要はあまり無いと思いますが、Twitterカードの説明はこちらにあります。

2. Yoast SEOの設定

まず、Twitterのアカウントを作成する必要があります。ここからはTwitterアカウントを持っている前提で説明します。

2.1. Twitterユーザー名の設定

Twitterのユーザー名を入れていきます。ユーザー名はメタタグの中の要素で使われるので必須です。

ダッシュボード>SEO>ソーシャル

アカウントタブで、「Twitterユーザー名:」の右枠にTwitterのユーザー名を入れます。ユーザー名は”@xxxxxxx”ですが、”@”は不要です。(間違って”@”を入れても、変更の保存をすると”@”は消えるので問題ありません。ここら辺もYoast SEOの優しいところです。)

”変更の保存”を押下します。

twitter-social-configuration

2.2. Twitter設定

TwitterタブでTwitterの設定をします。

まずは、”Twitter card のメタデータを追加”を”有効”にします。これでメタデータの挿入が行われます。

次に、”使用するデフォルトカードタイプ:”を選択します。選択肢は”Summary”か”大きな画像付きのSummary”です。単純に画像の大きさが異なることと、表示される文字数が若干異なります。

”変更を保存”を押下します。

twitter-social-configuration-twitter

個人的には”Summary”が良いと思いますが、これで物足りないと思うのであれば、”大きな画像付きのSummary”に変えてみてください。企業や団体のツイートで表示されているものはこちらのサイズの方が多いですね。

これでYoast SEOの設定は終わりです。

3. カードバリデーター(Card Validator)

何やら難しそうな言葉ですが、難しくありません。

Twitterカードを使うには一度カードバリデーターを通す必要があります。具体的にはカードバリデーターサイトにアクセスしてURLを打ち込むだけです。これでメタタグがきちんと挿入されているかを確認します。(正確にはValidatorなので承認されることになりますね)

ここで正しく表示されれば、そのURLはTwitterカードとして利用できます。

カードバリデーターではおそらく問題の無いサイトであることと、メタタグがきちんと入っているかのチェックを行っています。怪しいサイトのリンクをツイートしてほしくは無いのですね。

3.1. カードバリデーターサイトにアクセス

カードバリデーターのサイトです。カードバリデーターのサイトを使用するにはTwitterのログインが必要です。

3.2. URLを入力

URLを入力して、Previewボタンを押下します。すると右側にTwitterカードを含むツイートのプレビューが表示されます。手でメタタグを挿入している場合は間違いもあると思うのですが、Yoast SEOを使っているので、ほぼ100%表示されると思います。ここでエラーが表示されていなければ、承認されたということになります。

twitter-validation

4. Twitterカードの使用

カードバリデーターのサイトで入力したURLはTwitterでTwitterカードとして使用可能な状態にあります。

さっそく入力してみます。入力時は改行をしてもTwitterカードにはなりません。Twitterカードに変換されるのはツイートボタンを押下してからです。

twitter-card-use

※私の設定は”Summary”なので、SummaryタイプでTwitterカードが作られています

<スポンサーリンク>

まとめ

Yoast SEOからの設定はさすがに簡単ですね。Card Validatorを使うのが少々面倒な感じはしますが、ここはお作法なのであきらめてください。

  • Yoast SEOを使えばTwitterカードを使うのは簡単

元々はこちらと一緒に書いていたのですが、長すぎたので分離しました。こちらではタイムラインをブログに貼り付ける手順を紹介しています。

-WordPress
-,

執筆者:

<スポンサーリンク>

comment

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

*

関連記事

Popularposts-logo

ランキングを作成するプラグイン WordPress Popular Posts (WPP)

投稿にランキングを付けているサイトがよくあるので、興味本位で私もやってみました。ランキングを作るにはWordPress Popular Posts (WPP)というプラグインを使えばかなり簡単にできます。インストール/有効化から設定までまとめましたので参考にし …

whiteboard

WordPress 画面が真っ白になって超焦った話

WordPress環境でプラグインのスクリプトを修正しようとしていたら、WordPressの管理画面、もちろん、ページ自体にもアクセスできなくなりました。正確には真っ白な画面になりました。「ああ、これが噂の真っ白か!」と思いつつも超焦りました。そんな体験と対応 …

Pubsubhubbub

WordPress 投稿がパクられるのを防ぐWebSub/PubSubHubbub

Google検索にインデックスされる前に投稿をパクられることがあるらしいです。なんとも嫌な話です。著作権は当然書いている人にあるわけなんで、盗用というか犯罪ですね。 仮にパクられたとしても、パクられる前にインデックスに登録できれば、こちらに有利にはたらくはずで …

YoastSEO-logo

月別アーカイブが301リダイレクトされてしまう現象の解決

いつの間にか月別アーカイブが301リダイレクトされる状態になっていました。気づいたのはBing Web マスターツールのクロール情報で”HTTP301コード”に出ていたからです。実際に自分で月別アーカイブを確認してみると確かにリダイレクトされていました。問題解 …

amp-logo

【AMP対応】本当に簡単?私の思考ログ&AMP対応手順

Google AdSenseの最適化のページに「Accelerated Mobile Pages(AMP)を取得しましょう」という提案が表示されていました。AMP自体は知っていたものの、「自分で設定するのは大変そう」という感情を抱きつつトライしました。本稿では …

サイト内の検索はこちらから

サイト内の検索はこちらから

サイト内の検索はこちらから

カテゴリー

アーカイブ

最近の投稿

RSS icon


Scroll Up