All in one seoでTwitter Cards + Open Graph対応にしてTwitterにアイキャッチを付ける方法

PR

最新のAll in one seoではSocial metaという新たな機能が追加されています
そこではOpen Graph(以降OGと呼びます)の設定とFacebookへの設定が出来るのですが、実はtwitter Cardsのmeta情報も追加しています

初期ではsummaryのCardsタイプにされていて、設定する項目がありません
なので情報を書き換え、追加することでTwitter Cardsに完全に対応させます
これでsummary_large_image、photo、player、App、productのそれぞれのタイプにすることが出来ます

OGはAll in one seo の設定だけで設定が出来ます。
Facebookとか対応のサービスはこれだけでOKです

 

All in one seoでTwitter Cardsに対応する

まずは最新のAll in one seoにアップデートしておいてください

それでは、操作の説明です

 

All in one seoのSocial metaを有効にします

All in one seoでTwitter Cards   Open Graph対応にしてFacebookとTwitterにアイキャッチを付ける方法 (2) - コピー

Feature Manager で有効にします

 

これはすでに有効になってい状態です
有効だと色が付いています

All in one seoでTwitter Cards   Open Graph対応にしてFacebookとTwitterにアイキャッチを付ける方法 (3)

 

Social metaを有効にしたら設定をします、とても簡単です。
2・3分で出来ます

All in one seoでTwitter Cards   Open Graph対応にしてFacebookとTwitterにアイキャッチを付ける方法 (4)

Use AIOSEO Title and Description
All in one seoで指定しているTitleとDescriptionの設定を利用する

Profile Admins ID
FacebookのプロフィールのURLを入れます

Site Name
サイト名

Home Title
トップページ名

Home Description
トップページの説明文

Disable Jetpack Tags
Jetpackのプラグインを利用してタグを出力しているときに停止するかどうか

Autogenerate OG Descriptions
サイトの説明を自動生成するか(記事の頭から250文字取り出します・記事の投稿で個別に設定可能)

 

今回の重要なポイントが入っているのはここです

All in one seoでTwitter Cards   Open Graph対応にしてFacebookとTwitterにアイキャッチを付ける方法 (5)

Select OG Image Sourec
使用する画像を設定します

Default OG Image
初期画像(Selectで画像が指定できなかった時に表示するもの)

Use Custom Field For Image
カスタムフィールドから画像を取得して表示するために対象のカスタムフィールド名を入れる

Facebook Object Type
記事のタイプを選択 BlogかWebsiteか

Enable Facebook Meta for
Facebookに対応させるページを指定

投稿(post) Object Type
基本ArticleでOK

固定(page) Object Type
基本ArticleでOK

 

特別に設定する項目は5項目

  • Site Name
  • Home Title
  • Home Descriptions
  • Autogenerate OG Descriptons
  • Select OG Image Source

あとは初期値で基本大丈夫です、他のプラグインと機能がかぶる場合は個別に対応してください

画像の指定はアイキャッチがオススメですが他にも選択できます

All in one seoでTwitter Cards   Open Graph対応にしてFacebookとTwitterにアイキャッチを付ける方法 (7)

First Image In Content だと記事内(投稿に入力した内容)から一番最初の画像を取り出しますのでアイキャッチかこちらの設定を利用する人が大半じゃないかな、と思います。

 

最後に重複タグがないかチェックします

All in one seoでTwitter Cards   Open Graph対応にしてFacebookとTwitterにアイキャッチを付ける方法 (6)

なければOKです、あれば色々調整してください

 

ここからプラスアルファの作業でTwitter Cardsに対応させます

 

Twitter Cards 用の設定をテーマに埋め込む

初期で All in one seoはTwitter Cardsのタイプをsummaryにしています
設定項目がないので変更できません、この場合はタグが重複してしまいますが後から読み込まれたほうが優先されるのでその性質を利用します

不足情報+カードタイプを好きなものにする

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@9bb_">
<meta name="twitter:creator" content="@9bb_">
<meta name="twitter:domain" content="9-bb.com">

summaryのままでいい場合は最初の行は不要です、最初の行で投稿タイプを選んでいます
投稿タイプはこちらで試してみてください(https://dev.twitter.com/docs/cards/validation/validator

site、creatorはTwitterアカウント名
domainはドメイン名(省略可)

 

WordPressのテーマにある

<?php wp_head(); ?>

の下に記入します、header.phpにあるはずです

 

これでOKです。あとはTwitter Cardsへの登録も忘れないように!
こちらでTwitter Cardsへの登録方法を解説しています こちら

 

あと個別記事から細かく設定することも出来ます
画像の選択もこちらで出来ます

All in one seoでTwitter Cards   Open Graph対応にしてFacebookとTwitterにアイキャッチを付ける方法 (8)

All in one seoでTwitter Cards   Open Graph対応にしてFacebookとTwitterにアイキャッチを付ける方法 (1)

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー