【これで大丈夫!】 どうやってもfacebookにアイキャッチでogpが出力されない時! wordpress facebook

現段階では jetpackを使い、このやりかたでやっていく。

All in One SEOのソーシャルメディア機能は使わない!(facebookのogpが上手くいかないから。)

 

e-genjin-infoにて実装中

ishiura-informationにて実装中

 

プラグイン「All in One SEO」の設定とかでog:imageの設定をしてるとうまく反映されないので注意(マジで) All in one seoのソーシャルメディア機能ははずしておく

 

https://qiita.com/sola-msr/items/e73204bed06e9ab1da3a


下記の手順で行うと大丈夫。

まず、All in One SEOは使わないので、facebook for developersでアプリを作ったりアプリIDやユーザーIDを調べる必要がない。

 

※facebookページのページ名変更とtwitterのアカウント名変更は事前にしておいた方が良いとおもう。

①functions.phpへの記載

 

functions.php

//facebookとtwitterのOGP用

// URLからドメイン部分を削除したURLを返す
function delete_domain_from_url( $url ) {
if ( preg_match( ‘/^http(s)?:\/\/[^\/\s]+(.*)$/’, $url, $match ) ) {
$url = $match[2];
}
return $url;
}

 

②header.phpへの記述

header.php

head内に表記

<!–facebook用のOGP アイキャッチで表示–>
<?php if ( is_single() && has_post_thumbnail() ) : ?>
<!– 記事に設定されているアイキャッチ画像のOGP –>
<meta property=”og:image” content=”<?php echo home_url() . delete_domain_from_url(wp_get_attachment_image_src( get_post_thumbnail_id(), ‘full’ )[0]); ?>”>
<?php else : ?>
<!– デフォルトOGP –>
<meta property=”og:image” content=”https://e-genjin.jp/image/ogp.png“>
<?php endif; ?>

<!–twitter用のOGP アイキャッチで表示–>
<?php if ( is_single() && has_post_thumbnail() ) : ?>
<!– 記事に設定されているアイキャッチ画像のOGP –>
<meta name=”twitter:image” content=”<?php echo home_url() . delete_domain_from_url(wp_get_attachment_image_src( get_post_thumbnail_id(), ‘full’ )[0]); ?>”>
<?php else : ?>
<meta name=”twitter:image” content=”https://e-genjin.jp/image/ogp.png“>
<?php endif; ?>

※青い箇所はアイキャッチや投稿画像がない場合にデフォルトopg画像

<meta name=”twitter:card” content=”summary_large_image” />

<meta property=”og:title” content=”エネル原人 インフォメーション” />

※緑の箇所はtwitter用のカード設定とタイトル設定。これ表記するとアイキャッチがtwitterでも表示されるから必ず表記すること。なので↓の打ち消し線の状況を回避できる。

しかし、twitterにはデフォルトOGPが入らない。だからかならず投稿画像は入れてもらうようにした方がよい

※facebookへやアイキャッチからogpが挿入されたが、twitterには表示されなかった。twitterは投稿画像をアップするとそれがogpになった。facebookには投稿画像はogpにはならなかった。

 

 

以上これで下記の状態になる。↓

③表示結果

投稿画像→ twitterのみ
アイキャッチ→ facebookとtwitter
投稿画像なし アイキャッチなし → facebook  twitterにデフォルトOGP表示

 

 

【2020年版】Twitterカードとは?使い方と設定方法まとめ

 

 

 

OGPのサイズ

 

クライアントへのOGPのアイキャッチアップ方法のマニュアルはnew-ishiura/ドキュメント/インフォメーション編集方法.aiに記載

 

jetpackとの連携設定

 

SSL(https)化してないWordPressからFacebookに自動投稿したいなら「Jetpack」を使おう!

注意

admin以外のユーザーではfacebookへはpostが流れない。アカウントを別ユーザーでログインしてやろうとすると facebook共有箇所がでない。この投稿を共有かしょでアカウントに接続とでるが、wordpressCOMに接続になってしまう。わからない。多分ジェットパックを設定する何かと関連あるんだろうがわからない。

adminで対応してもらう。

 

facebook へのogp マスターテーマはnakao を使用すること(多分これで解決!)

チャンスメーカーのブログのcm-blogのogpがうまくいかず、(twitterは大丈夫だが、facebookには吐き出せないでいた。)index.phpやfunctions.php に備忘録で表記させている参照サイトのコード書いたり、他のテーマのkawaratをアップして チャンスメーカーのブログのogpをfacebookで表示させようと3日間トライしたがどれもだめ。

all in one でソーシャル設定してもだめ。(チャンスメーカーのinformationにあるall in one seoの記載はあっている。)

cm-blogのindex.phpにogpの関連記述してソースみたら出力されているが、facebookデバックをかけるとキービジュアルがでてしまう。設定したOGPの画像がでない!


下記でのテーマではきちんと表示された。

オリジナルテーマの nakao

nakaoをinformationにアップしてテーマをnakaoにしたらogpは大丈夫だった。やはりテーマファイルに関連したトラブルだった。twenty系でもogpは表示された。facebook側へもOK。

※cm-blogをnakaoにあわせて修正は大変なので、現在は直さずにいる。

all in one seo  と jetpack は必須。jetpackないとtwenty系でもogpは出せてもfacebookやtwitterには投稿できない

これからはブログを作るときのマスターには nakao コピーしてを利用していくこと!因みにnakao自体はphpにはopg用のコードを記載はなし、functions.phpにも記載ない。


facebookのアプリを作るときのサイトURLはブログのURLではなく、サイト自身のURL。

 


All in one seo のソーシャルメディア部分

※all in one seoはずしたらどうなるかわからんが、このように設定してるのでOGPがこのようになるんだとおもう。twenty系はそうなる。nakaoも。→all in one seoによって設定が反映されることを確認できた。

 

↑ ※OG:Imageソースを選択で コンテンツ内の最初の画像にしたら、アイキャッチでなくて、投稿箇所で初めに挿入した画像がogpとして表示されたことを確認できた。

 

wordpress の ogpの書き方

【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法

※コピペ時うまくいかないときはダブるコーテーションがここからコピペするときに勝手に変換されて全角になっているかも注意

 

 

今回は、WordPressでプラグインを使わずにOGP設定をする方法とサンプルコードを紹介します。

1. OGPとは?

OGPとは、ページがシェアされたときに、アイキャッチ画像やタイトル、要約文などを魅力的に表示してくれる設定のことです。

OGPタグを設定した場合

例えば、OGPタグがちゃんと設定されていると、facebookでシェアされたときに、このようにカード形式でリンクを表示してくれます。

これならクリックしたくなりますよね。
TwitterカードもOGP設定と同じです。

 設定なし何も設定していないと…

こちらはTwitterカードの設定をしていない場合です。

 設定ありTwitterカードとは

こちらは、Twitterカードを設定している場合です。Twitterをやっている方ならきっと見たことがあるはず。

なお、Twitterカードについては別の記事でイチから詳しく解説しています。詳しい仕組みに興味のある方はぜひチェックしてみてください。

OGP/Twitterカードで設定するべきタグ

 をつけたタグが特に重要なものになります。

<meta property="og:url" content="ページのURL" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページのタイプ">
<meta property="og:description" content="記事の抜粋" />
<meta property="og:image" content="画像のURL" />
<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@Twitterユーザー名" />

<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="appIDを入力">

↑ ページがシェアされたときに、これらの情報をfacebookやtwitterのシステムが読みに来るわけですね。
og:type(ページタイプ)では、トップページなら「website」、記事ページなら「article」と入力します。
twitter:cardではカードの種類を実質2種類から選ぶことができます。画像が大きく表示されるように「summary_large_image」と入力するのがおすすめです(詳しくは先ほどリンクを載せたTwitterカードの解説を読んでみてください)。

 

2. OGPタグが設定されているかどうかを調べる

WordPressのテーマによっては、OGPタグがあらかじめ設定されています。また「All in One SEO Pack」などのプラグインを使って設定することもできます。
というわけで、まずは自分のブログにOGPタグが設定されているかどうかを調べましょう。こちらの手順はパソコンで行う必要があります。

手順1:記事ページを開く

記事ページを開く

まず記事ページを開きましょう。どのページでも構いません。

手順2:右クリック

ページ内のどこでも良いので、右クリックします。

手順3:「ページのソースを表示」をクリック

ほとんどのブラウザでは、右クリックしたときのメニューに「ページのソースを表示」というものがあるので、こちらをクリックします。

手順4:「og:」で検索

すると、そのページを構成しているHTMLタグがずらっと表示されます。拒否反応が出てくる方もいるかもしれませんが、グッと耐えてください(笑)

HTMLが表示される

ここで、Ctrl+Fのショートコードを実行します(Macなら+F)。これでページ内の文字列を検索できるようになります。

ogp設定

↑ まずは「og:」と検索してみましょう。<meta property="og:◯◯というようなコードが見つかれば、OGP設定が書かれています(正しいかどうかは別として…)。

逆に「og:」でヒットしなければ、OGP設定はされていないので下の手順で設定を行いましょう。

3. WordPressでプラグイン無しでOGP設定をする方法

今回はプラグインを使わずに、OGP設定をする方法を紹介します。設定するのは「トップページ」と「投稿ページ/固定ページ」のみになります。

 

 

/*********************
OGPタグ/Twitterカード設定を出力
*********************/
function my_meta_ogp() {
  if( is_front_page() || is_home() || is_singular() ){
    global $post;
    $ogp_title = '';
    $ogp_descr = '';
    $ogp_url = '';
    $ogp_img = '';
    $insert = '';

    if( is_singular() ) { //記事&固定ページ
       setup_postdata($post);
       $ogp_title = $post->post_title;
       $ogp_descr = mb_substr(get_the_excerpt(), 0, 100);
       $ogp_url = get_permalink();
       wp_reset_postdata();
    } elseif ( is_front_page() || is_home() ) { //トップページ
       $ogp_title = get_bloginfo('name');
       $ogp_descr = get_bloginfo('description');
       $ogp_url = home_url();
    }

    //og:type
    $ogp_type = ( is_front_page() || is_home() ) ? 'website' : 'article';

    //og:image
    if ( is_singular() && has_post_thumbnail() ) {
       $ps_thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
       $ogp_img = $ps_thumb[0];
    } else {
     $ogp_img = 'TOPページ&アイキャッチ画像がないときに使われる画像のURL';
    }

    //出力するOGPタグをまとめる
    $insert .= '<meta property="og:title" content="'.esc_attr($ogp_title).'" />' . "\n";
    $insert .= '<meta property="og:description" content="'.esc_attr($ogp_descr).'" />' . "\n";
    $insert .= '<meta property="og:type" content="'.$ogp_type.'" />' . "\n";
    $insert .= '<meta property="og:url" content="'.esc_url($ogp_url).'" />' . "\n";
    $insert .= '<meta property="og:image" content="'.esc_url($ogp_img).'" />' . "\n";
    $insert .= '<meta property="og:site_name" content="'.esc_attr(get_bloginfo('name')).'" />' . "\n";
    $insert .= '<meta name="twitter:card" content="summary_large_image" />' . "\n";
    $insert .= '<meta name="twitter:site" content="ツイッターのアカウント名" />' . "\n";
    $insert .= '<meta property="og:locale" content="ja_JP" />' . "\n";

    //facebookのapp_id(設定する場合)
    $insert .= '<meta property="fb:app_id" content="ここにappIDを入力">' . "\n";
    //app_idを設定しない場合ここまで消す

    echo $insert;
  }
} //END my_meta_ogp

add_action('wp_head','my_meta_ogp');//headにOGPを出力

 

 

これでOGPタグがHTMLのheadタグ内に出力されるようになります。ただし、3箇所だけ書き換えを行う必要があります。オレンジの下線が引かれている部分です。

書き換え1:TOPページ&アイキャッチ画像がないときに使われる画像のURL

トップページがシェアされたときや、記事ページにアイキャッチ画像が登録されていなかったときに使われる画像のURLをこちらに貼り付けます。

サルワカくんの顔(通常)
サルワカくん

管理画面の「メディア」から画像をアップロードし、その画像の「URL」を貼り付ければOKです。

書き換え2:ツイッターのアカウント名(twitter:site)

<meta name="twitter:site" content="~" />content=""内にTwitterのアカウント名(ユーザー名)を入力します。
個人のツイッターアカウントでOKです。このとき@も含めるようにしましょう。
content="@saruwakakun"という感じですね。

書き換え3:アプリID(fb:app_id)

facebook向けのOGP設定として「fb:app_id」を指定するのが望ましいとされています(Facebookさん自身は「必須」と言っています)。これは、facebookでシェアされたときのクリックやインプレッションなどの解析ツールを使うために必要になります。
なのですが、このapp_idを取得するのが結構面倒なんですよね…。余裕のある方は「Facebook App IDの取得方法」を参考に取得してみてください。
取得したapp_idは、上述のコードの<meta property="fb:app_id" content="~">content=""内に入力してくださいませ。

OGPタグがうまく設定できたかどうかチェックしよう

facebookとTwitterそれぞれで、ちゃんと設定ができているかを確認しておきましょう。

↑facebookの確認はこちらから。調べたいページのURLを入力して「デバッグ」をクリックするだけ。うまく設定できていれば、以下のようにプレビューなどが表示されます。

facebookのogpデバッグ

うまく反映されないときは「もう一度スクレイピング」をクリックしてみてください。facebookさんが再度そのページを読みに行ってくれます。

↑次にTwitterです。こちらも同じようにURLを入力して「Preview Card」をクリックするだけでOKです。

OGPで表示される画像サイズチェックには・・・

「アイキャッチ画像サイズチェッカー」というものを使えば、Twitterやfacebookでシェアされたときにアイキャッチ画像がどのように表示されるのかをまとめてチェックすることができます。
ぜひご活用ください。

wordpressからのfacebookへのogpが表示されない オリジナルテーマの問題だった

オリジナルで作ってるwpのテーマで表示されない。All in one SEOで設定していてもtwitterは表示されるがどうやってもfacebookでは埋め込んでいるキービジュアルが表示される。htmlにもogp記してもだめ! テーマをtwinty 系に変えたら投稿画像が表示されるので多分オリジナルで作ったテーマが問題起こしていると思う。chancemakerはだめだった。ってことはカワラートもそうじゃないかな。

wordpress facebook ogp

2019/6/24

chancemakerのテーマでも同じ問題がある。テーマをtwenty系に切り替えたらfacebookへogpはwordpressの投稿から入った。このことからオリジナルのテーマに何かしらの問題がある。因みにキービジュアルが表示される問題があるのだが、その箇所けずると表示されてた。


カワラートのwpからFBへの自動投稿がされないとの連絡。jetpackがなぜか設定されていない。新しく設定したがなぜかブログのキービジュアルが必ずOGPになり、投稿画像はならない。以前は ALL IN one SEO の画像投稿種類にアイキャッチ項目があったがそれもバージョンアップなのかなくなっている。

いろいろやってみたがプラグイン側の設定では投稿画像をOGPできない。余談だがfacebookのアプリ設定がいまいちわからない。facebook for developersのアプリドメインの箇所が何を入れたらよいかわからない。適当にいれてもエラーになる。

 

WordPressのOGP設定に必要なFacebookアプリIDの作成手順

 

https://www.h-fj.com/blog/archives/2012/01/21-152934.php

 

 

 

結局header.phpには下記を記述

<!– ※基本共通設定 –>
<head prefix=”og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#”>
<title> ページの タイトル</title>
<meta property=”og:type” content=” website” />
<meta property=”og:url” content=”http://kawarart-hara.jp/kawarart/” />
<meta property=”og:image” content=” http://kawarart-hara.jp/image/facebook/ogp-logo.jpg” />
<meta property=”og:site_name” content=”カワラート・ハラ” />
<meta property=”og:description” content=”家屋と屋根と瓦を守りたい。屋根と瓦のことなら カワラート・ハラ” />

<!– Facebook用設定 –>
<meta property=”fb:app_id” content=”2354448061442265” />

<meta property=”fb:admins” content=”100010541739329” />

赤 facebookアプリのアプリID と アドミンID

 

All in one Seo に設定もしたが反映されているかは謎。いまいちわからない。jetpackなくすと反映されなくなった。

All in one seoはogp設定プラグインであって、自動投稿のプラグインじゃないからだった。(今更わかった。2019/6/24)

仕方ないので一応 jetpackとAll in one seoはいれつつ、OGPのパスはhome.phpで設定している画像を表示させることにした。画像の大きさは 1000x400だが両端はカットされている。

https://blog.sixapart.jp/2012-06/ogimage.html

 

FacebookのOGP設定に必要なfb:admins IDの確認方法

 

 

最新版 facebook noOGPをwordpressやウェブに表記して facebookへ反映させる方法

まさはしFPで実装

1  OGP画像として 200px  x  200px の画像を準備 余白として前後に20pxくらいあった方がよい。この大きさでないとwebサイト側にOGPコード張ってもOGP画像が認識されないので注意

 

2 facebook for developers へ行き管理者アカウントでログイン。

下記サイトにならいappを作る。一発目は何かプラットフォーム選択でwebが選べなかったのでもう一回新規にしたらできた。アプリIDと設定をする。公開表記若干違う。

FacebookのOGP設定に必要なfb:app IDの取得方法

 

3 wordpressには All in One SEOを仕様。jetpackはいらない

ソーシャルを有効にして、設定は、画像設定のOGP:imageソースは First image in contact  で大丈夫

デフォルトのイメージにOGPのイメージをアップ 
ホーム画像も同じく

 

facebook管理者IDを入力する箇所では、facebook設定内の管理者IDの調べ方

Facebook 管理者 IDの確認方法、ユーザーネーム取得方法

 

これでテキストのみの場合はOGPの画像で、画像アリの場合は最初の投稿画像がfacebook側にてページのリンクを張った時点で表示できる。

 

 

 

4   ウェブページ head内にOGPコードをはる

https://ferret-plus.com/610

 

<html prefix=”og: http://ogp.me/ns#”>

↑ html5の時は<html>タグに追加表記

 

 

<!–FaceBook OGP–>

<meta property=”og:title” content=”まさはしFP家計相談所”>
<meta property=”og:type” content=”website”>
<meta property=”og:description” content=”家計診断ならおまかせ!家計のやりくり・節約なら、まさはしFP家計相談所”>
<meta property=”og:url” content=”http://fuji-office.com”>
<meta property=”og:image” content=”http://fuji-office.com/image/fb1.jpg”>
<meta property=”og:site_name” content=”まさはしFP家計相談所”>

<meta property=”fb:app_id” content=”1967051363547689″ />

 

ウェブでのOGPが表記されない時はfacebookデバックを使ってキャッシュをクリアする

http://www.kagua.biz/fb/cacheclear.html

OGP Open Graph protocol  facebookページの情報をwebページに設定

work/new-eikaiwa にて設定中

https://ferret-plus.com/610

OGPとは「Open Graph protocol」の略称です。FacebookTwitterGoogle+mixiなどのSNSでシェアされた際に、そのページのタイトルURL・概要・アイキャッチ画像(サムネイル)を意図した通りに正しく表示させる仕組みです。SNSでの拡散を通じて多くの人に記事をみてもらうためには必須の設定といえます。

 

app_idの取得方法

https://blog.sixapart.jp/2012-04/fb-app-id.html

 

facebook側でのデバックで、表示変わらない場合のキャッシュのクリア方法

http://blog.ko31.com/201411/facebook-ogp-cache/

 

 

https://junichi-manga.com/error-facebook-eyecatch/