３０代ではじめてこのブログを作った私、知識なんて皆無でネット検索からなんとかサーバー借りて、ドメイン取ってと、よちよち歩んできました。
ワードプレスやブログの始め方書き方はみなさんすんばらしい記事を書いてくださってるので、書いてある通りにやれば私のようなズブの素人でも一応開設することができましたが…
壁にぶち当たります。
問題が起こった時に何もかも意味不明。
検索しても、「headタグの下に貼り付けて〜」とか「functionの〜」とか１つ１つ調べなくてはならないので時間のかかること。
せっかく頑張って開設したので地道に勉強をしようと思います！！
で今回、前々から悩んでたけど無視していた【Twitterカード問題】についてなのです。
結論から言えばすごい簡単に解決しましたので、解決法だけ読みたい方は目次より飛んでください。(各種設定については私が説明するまでもないと思うのでしません。)
要するに今回は、設定は合ってるはずなのにTwitterカードがうまく表示されないという悩みに対して初歩的なことで解決できた私の経験談です。
症状は様々なので必ず解決する方法とは限りませんが１つの参考にしてください。また、初心者ブロガーをターゲットにしている玄人マーケッターの方の参考にもなるでしょうか…
おヒマな方は30代機械オンチ女子が無い知恵絞って丸一日試行錯誤した様子も読んでいただけると嬉しいです！
この記事作成時 wordpress：5.4.2 / テーマ：giraffe
第一の問題・URLの文字化け
私のブログでTwitterに関するプラグインだと「All in One SEO」と「Jetpack」の２つを使っています。どちらの設定も検索して得た知識ではありますが問題なく設定できていました。
当初はブログを更新するとTwitterに連動してUPする「自動設定」にできていました。
しかし…
私はURLに日本語を使っています。これは当時、色々考えた結果使用しています。
Twitterに自動投稿したものがこちら
するとこんな感じでURLの日本語の部分が文字化けというか暗号のような怪しさ満点で表示される投稿になってしまいます。
これも含めて、当時はいじるのもよくわかんないし…まぁよしとしていました。
しかしやはり文字化けが気になり始まった頃…
第二の問題・Twitterカードが表示されない
他の人がツイートしてるリンクではTwitterカードで表示されるのに私のはなぜカードじゃないの？
➡︎ 設定していなかったので当たり前でした。
これもググってそれ通りに設定しました。Twitter側でも私のサイト側でも設定は問題なさそう。なのになぜかカードの状態で表示されない。
第一の問題の時と変わらない状態です。
第一・第二の問題が急に解決する
第一・第二の問題に加え、ブログ更新のツイートに一言付けたいんだよなぁと色々触ってたら「ツイートする」から編集画面で直接リンクをコピペするとちゃんとカードで表示される事が判明。
文字化けはおそらくURLに日本語を使ってる限り無理だろうしと思っていたけど、なんとURLは表示されないじゃないか。
それならこのままでいっか😽と悩みが一気に解決します。
以降、プラグインの自動共有設定を切って手動でブログ更新のツイートを投稿することにしました。
この時点で私のブログ更新のツイートのやり方は
- 投稿したページをWebで開く
- 一番上のURLが表示されてるところをクリックしてコピー
- Twitter「ツイートする」編集画面でペースト
- 一言を加えてツイート
超原始的でお恥ずかしい😂
第三の問題・Twitterカード表示崩れ
今までと同じ手法でブログ更新ツイートしてたんですが急に、なんか写真が内容と違う🤔
投稿編集画面の
ここ↑いじったかなーって思ったけどそんな記憶ないし。
気付いたらリンク先が記事ではなくサイトトップページになっていたのです。しかも写真は全然関係ない記事の写真になったりしてるのです。
ちょっと前まで問題なかったのに…
新しくプラグイン追加したり色々設定をいじっていた時期なので、何か仲良くない設定をしてしまったのでしょうか。
色々調べてみると、また始まりました。「headタグの〜」「functionの〜」あーもうこれ苦手😭素人がこんな事始めてすみません！無知ですみません！！てPCに向かってめっちゃ謝りました(笑)
へるぷみーーーーー(T_T)
解決への道が見え始める
でよくよく調べてみたら、「Card Validator」というもので設定があっているか調べられると！
使い方はURLを入れて「Preview Card」ボタンを押すだけ！
あってルーーーーー😭
ちゃんと表示されルーーー😭
過去記事やカードタイプを変更してみても表示されルーーーーー😭
エラーコードも出てないーーーー😭
こうなってくるともう意味がわからない🤦♀️ググったら「反映に時間がかかる、設定が合ってるなら時間が経つと解決する」なんて言ってる記事もあったけど、違う気がするの。
だってカードタイプの変更はすぐ反映されてるもん😭
試しに全部ローマ字のURLの記事をカードタイプを変更して「Card Validator」とツイート編集画面と両方で表示させてみたらちゃんと反映されてるもん😭
私は直感します。
時間の問題ではない。日本語URLの問題だ。
一日中考えました。
あぁパーマリンク変更したくない…
もうあれやりたくない…
そうこうしているうちに、あることに気付きました。
URLの日本語部分が読み込まれていない！
要するに、ツイート編集画面の中で私の記事のURLをコピペした時現れるTwitterカードは、後半の日本語部分を消しても消さなくてもトップページへのリンクが表示されているのです。
(じゃあなぜ写真がデフォルトじゃないんだ、という問題は一旦無視する)
確かに、昔悩んだ文字化けはしてないのはその部分を読み込んでないからだ！
なぜ急にURLの日本語部分を読み込んでくれなくなったのでしょう❓とにかく読ませる必要があります。
早速ググったらWebでも変換できるらしい。
検索してこちらのサイトにお世話になり、日本語部分をエンコードして(言葉を覚えた)例によって暗号みたいなURLに変換したものを作成します。
(リンクフリーとのことなので喜んでシェアさせていただきました！)
これをツイート編集画面にペーストしてツイートしたら
大騒ぎしたことは全て解決しました。
解決策をまとめます
- 日本語入りURLをエンコード
(上記サイトなど利用) - コピペでツイートする
以上。
直後、さらに単純な解決法が見つかる
- リンク付でシェアしたいページをWebで表示する
- 公開済記事のここ↓など、シェアボタンからシェアする
ワードプレスって、プラグインって、優秀ですよね。
いつまでもコピペしてる時代じゃないんだね。
ここからシェアすればちゃんとエンコードしてくれるんだね。
当たり前だよね。言っててつらくなります。
いるかわかりませんがこの機能を実装していない方がいましたらサイトでエンコードするやり方でどうぞ。
まとめ
すっごい色々調べたんですが、単純すぎてこんなことに悩む人は私だけなのか、ググってもこの簡単な解決策は見つけられませんでした。
これで全てが解決するとは限りませんがこんなことで解決する場合もあるんだというくらいで受け止めていただけたら幸いです😂
きっと一人や二人くらいは同じ悩みを持つ人がいるかと思いますので、私の備忘録の意味でも記事にしました。
これに懲りてパーマリンクの設定を今後いじるかは……悩みます。
現場からは以上です😭😂
