【WordPress】All in One SEO PackのOGP設定がSNSに反映されない時の対処法【Affinger5】

2020年4月27日

綾人
こんにちは。綾人(@xjustchillingx)です。


先日、All in One SEO Packでディスクリプション設定したのに反映されていなくて困ったので、その対処法をまとめました。


ボクはブログを書いた後にもTwitterに投稿するのですが、その時にTwitterカードの説明文が反映されていなかったんです…。


この記事では同じような悩みを持たれている方の為に、以下のような内容をまとめてみました。

OGP設定とは「Open Graph Protocl」の略で、TwiiterやFacebookなどのSNSに記事がシェアされたときに、タイトル・URL・説明文・アイキャッチ画像(サムネイル)などを掲載してくれる仕組みのことです。


最初は設定の反映に時間が掛かっているのかな?って思っていたのですが、実はそうではありませんでした。


それでは順番に解説をしていきます。


※All in One SEO Packの導入~SNS投稿内容の編集までを理解しているよって方は、metaタグの確認まで飛んじゃってOKです。

ブログ開設から順番に知りたい方はこちらの記事からどうぞ!

【初心者向け】WordPressブログが誰でも簡単に作れる3つのステップ【イラスト&画像で解説】

続きを見る

ALL in One SEO Pack導入で最低限確認すること

まず最低限確認が必要なAll in One SEO Packの導入~SNS投稿内容の編集までを軽くおさらいしましょう。

All in One SEO Packの導入

そもそもプラグインを導入していないという方はこちらからインストールして下さい。

画像の赤枠の部分を押すだけです。

プラグインを導入したら有効にしておくこともお忘れなく!

ソーシャルメディアの設定

プラグインをアップロードしたら管理画面のメニューからAll in One SEO→機能管理と進んで下さい。

下記画像の赤枠部分がActiveとなっていると思いますので、そちらのボタンを押してください。

色が付いてDeactiveと表示されていればソーシャルメディアの機能が使えるようになっています。

また、書いた記事をTwitterでシェアする場合は、下記の画像を参考に設定をしてください。

OG:Image ソースを選択 アイキャッチ画像を選択
デフォルトの OG:Image アイキャッチ画像が無い時に表示したい画像を選択



デフォルト Twitter カード 2つあるので好きな方を選択
Twitter サイト 自分のTwitterIDに@を付けたものを入力
Twitter ドメイン 自分のTwitterホーム画面のURLから「https://twitter.com/」を除外したものを入力



SNS投稿内容の編集

それでは実際にSNSなどに投稿する内容を編集していきましょう。

普段記事を書いている投稿画面を下までスクロールすると下記画像のような箇所が追加されているはずです。

ここでSNSにシェアされた時に表示させたいタイトルと説明文を編集します。

編集が終わったら実際に投稿する前に内容のプレビューを見てみましょう。
プレビューはhttps://cards-dev.twitter.com/validatorから確認することができます。

使い方は簡単で、

①「Card URL」にTwitterカードを作成したいページのURLを入力。

②「Preview card」ボタンを押す。

③右のプレビュー欄に画像が出ればOK。

後はツイートの際に「Card URL」に入力したURLを記載するか、記事にSNSシェアボタンがある場合はそちらから投稿しても大丈夫です。

metaタグの確認

さて、All in One SEO Packの導入~SNS投稿内容の編集までをおさらいしました。


ここまで設定した上で反映されないという方は、ボクと同じ原因の可能性がありますので、その対処について説明していきます。


まずは以下の2つの画像を見てください。

中略

これはwebページを右クリックしたときに出てくるメニューの「ページのソースを表示」で見ることができるものです。


確認すべきは、赤枠で囲っているmetaタグが重複しているところです。


ざっくり説明すると、webページを生成する処理には順番があります。


前後の処理順は省くとして、注目する必要があるのは

ここに注目!

All in One SEO Packのmetaタグ生成⇒AFFINGERのmetaタグ生成の順で処理を行っている

metaタグに同じ変数を使用している

という点です。


つまり、webページを生成する処理順によって最初に設定したALL in One SEO Packのディスクリプションの内容が、それよりも後に処理されるAFFINGERの処理によって上書きされていたのです。


原因が分かったので、次に修正方法を見ていきます。

metaタグ重複の修正方法

WordPressの管理画面で、外観→テーマエディター→編集するテーマを選択で「st-ogp.php」を選択してください。


すると以下のようなソースコードが表示されると思います。

この画像では165行目~197行目に記述されている部分を全てコメントアウトしてしまいます。


ちなみにプログラムのソースコード上で実行させない部分のことを「コメント」と言い、「コメントアウト」とは、プログラムのソースコードなどを編集する際に特定の箇所をコメント化して一時的に除外することを言います。


コメントアウトの方法は1行ずつするやり方とまとめて囲ってしまう2パターンあります。
今回は行数が多いので、以下の画像の通りまとめてコメントアウトしてみましょう。

編集が終わったら保存をします。

それでは改めて先ほどのページのソースコードを表示させてみましょう。

1枚目は先ほどと何も変わっていません。

2枚目は赤枠部分に先ほどあったOGP設定が消えています。


これでALL in One SEO Packで設定した内容が消えることはなくなりました。


もう一度https://cards-dev.twitter.com/validatorから確認してみてください。

まとめ

今日のまとめです。

タグの重複による上書きなどは、F12で表示される開発者ツールなどでもエラーが発生しないため、ソースコードに慣れていない方は、なかなか原因に辿り着くのは難しいと思います。


もし今日の記事を読んで周りにも同じような悩みを抱えている人が居たら、内容をシェアしてあげてくださいね!


それでは!

人気記事

【2021年最新版】おすすめのWordPress無料テーマ5選+有料テーマ3選

続きを見る

【2021年最新版】ブログ開設したら登録すべき、完全無料のおすすめアフィリエイトASP5選【初心者向け】

続きを見る

-ブログ

Copyright© やがみずむ! , 2021 All Rights Reserved.