Grav AutoSEO でTwitterCardがうまく表示できない問題

INTRO

某サイト構築で、TwitterCard対応(urlをツイートすると、いい感じにサムネイル表示してくれるアレ)対応しようとしてハマったのでメモ。

原因1: Gravで日本語がカットされる問題

/user/plugins/admin/classes/utils.php の slug関数の実装がマルチバイト考慮されてない。

    public static function slug($str)
    {
        if (function_exists('transliterator_transliterate')) {
            $str = transliterator_transliterate('Any-Latin; NFD; [:Nonspacing Mark:] Remove; NFC; [:Punctuation:] Remove;', $str);
        } else {
            $str = mb_convert_encoding($str, 'UTF-8');
        }

        $str = preg_replace('/[-\s]+/', '-', $str);
        $str = trim($str, '-');

        return $str;
    }
}

とかしてごまかす。副作用不明。

あと、自動アップデートで死ぬので要注意。

admin側直したけど、これ、よく考えたら、AutoSEO側直した方がよかったね...(slug呼び出しをフックすればよかった)

原因2: og:image がセットされない

autoseoの仕様上の問題。

ページと同一ディレクトリのイメージの中から、文字列ソートで最も先頭にくるものが指定される。

故に、image表示したい画像を 01_* とかプレフィックスつけて入れておく。

一応、og:image の結果を確認した方が吉。

画像サイズはこれを参考に。というか、1.91:1、600x314か1200x628程度で作っておけばいいんじゃないかな。
https://www.granfairs.com/blog/staff/setting-twitter-cards

あと、テンプレートによっては、firstImageがcontentに反映されてくるケース(blogとか)あるので、そっちとの見栄えの整合性はどうにかハックして頑張れ。(autoSEOブランチするしかねぇw)

原因3: サイトがTwitterにホワイトリスト申請されてない

しなくても大丈夫になったかと思ったけど必要だった。

登録されると、iOS/AndroidのTwitterアプリでアドレス打ち込んだ時点でcard表示されるから、ツイートまでしなくてもわかるはず。

Previous Post