アフィリエイト Wordpress SINGER PLUS+

STINGER PLUS+でTwitterカード用のOGP設定でハマった件

更新日:

どうもみなさんこんにちは
余りにもハマってしまい、解決したころには安らかなイイネになってしまいました。

STINGER PLUS+では、Twitterカード用の設定が簡単にできるかと思いきや、何が悪さしているのかTwitterのCard validatorでトップページ以外のページで「ERROR: Required meta tag missing (twitter:text:description)」というメッセージが出てしまうという事態が起きました。

どうやらDescriptionに問題があるようですね。

まぁ簡単に解消できるだろうと高を括っていたら、4時間もかかってようやく解決できましたのでご紹介します。
ただ、function.phpなどを触りますので気をつけて下さいまし。

スポンサーリンク

どんな症状か?

まず環境としてはSTINGER管理でOGP設定とTwitter設定が済ませてある状態で、問題のDescriptionは、プラグインの「Meata Manager」による自動抜粋という設定です。

TwitterのCard validatorのサイトで申請するも、トップページは問題無くクリアするのですが、記事ページなどはエラーが出て進めないという症状です。

TwitterCard1

最初はOGPの設定が悪いのか?何かのゴミのせいなのか?などとSTINGER管理で設定を消したり付けたりしていましたが一向に直りません。

MetaManagerがサボっているのか??とプラグインを停止して、直接メタディスクリプションに記入してみるも直りません(Meta Managerごめんなさい)

だったらみんなハマってるからGoogle先生に聞けば一発だよね!とGoogle先生に聞くもさっぱり分からず・・・もしかして私だけ?

ソースはどうなっているの?

要はDescriptionが読めないんだよ!というエラーですので、実際Descriptionがどうなっているか表示されているページのソースコードを見るのが早いでしょ?って事でソースをのぞいてみました。

通常のDescriptionはしっかりと設定されていて、「どうもみなさんこんにちは」から始まるいつもの文章が見受けられます。さすがMeta Manager。しっかり仕事してくれています。

でも実際Twitterが読むのは「og:description」なので、そこを探すと・・・

S001_megane0420140830144448-thumb-autox1600-17765

!!

空っぽ!
なんでやねん!

TwitterCard2

「og:description」のcontentがまさかの空白です。

でもFacebookではちゃんとOGP設定できているのになぜ??

TwitterCard3

実際試してみると、やっぱりちゃんとできていますが、でもよく見ると「og:description」は空っぽです(笑)
つまりFacebookでは「og:description」が空っぽでも、通常の「description」から引っ張って来ているという事でしょう。Twitterもそうしてくれたら良いのに・・・

対応策はどうするの?

対応策としては2つありまして、

一つ目は「og:description」にちゃんと値を入れる方法を頑張って作ること
二つ目はTwitterを諦める(笑)

2種類ですが、ここまで既に2時間程格闘していますので諦める訳にもいかず何とか対応策を探しているとどうもst-ogp.phpでの書き出しが怪しそうです。

これをすればちゃんとTwitterCardができました

怪しいところが分かれば早いもので、あっという間に先人の知恵が見つかりまして(オイ)さすがはGoogle先生です。心優しい方、Google先生ありがとう!

細かい技術的な説明は抜きにして、これをすればOKという事だけ書きます。疲れたんで。

まずはfunction.php

function.phpの一番下に以下のコードを追加します。function.phpは失敗すると真っ白になってダッシュボードにログインすらできなくなるので気をつけて下さい。私はいつもFFFTPを繋いでいつでもバックアップを差し込めるように待機させてます。

function kotoriexcerpt($length) {
global $post;
$content = mb_substr(strip_tags($post->post_excerpt),0,$length);

if(!$content){
$content = $post->post_content;
$content = strip_shortcodes($content);
$content = strip_tags($content);
$content = str_replace(" ","",$content);
$content = html_entity_decode($content,ENT_QUOTES,"UTF-8");
$content = mb_substr($content,0,$length);
}
return $content;
}

つぎにst-ogp.php

content='<?php echo mb_substr(get_the_excerpt(), 0, 100) ?>'

というところが2か所ありますが、2つとも以下のコードに置き換えます。

content='<?php echo kotoriexcerpt(140); ?>'

文字数が140となっていますが、100でもツイッターの文字数制限140文字以内なら何でも良いと思います。と思いましたが、そういえば文字数制限が緩和されているので何でも良いですね。

TwitterCard4
無事設定できました。

今回のまとめ

分かってしまえば簡単な内容ですが、やはりページのソースコードを見て確認するのは大事ですね。いつでも先人の知恵とGoogle先生に頼ってしまっていたので良い勉強になりました。

という事で心優しい先人の知恵のご紹介です。とても親切に解説されています。

で、Twitter Cardってどうやって使うんだ??(笑)

-アフィリエイト, Wordpress, SINGER PLUS+

Copyright© 上善如水 , 2019 All Rights Reserved.