雪山こもりを8年継続中だからわかるスノーボード・ライフスタイル情報サイト

日本語URLをTwitterカードでシェアすると起きる表示崩れを素人が解決した話

2020/09/16
 
この記事を書いている人 - WRITER -
ちゃんぴー
脱サラしてスノーボードのある生活を選んだ、30代独身女子。8年間雪山こもり中。人と違う生き方をするのは色々大変だけど、たくさんの経験をして今の生活が自分に合っていることを実感し、転職経験が多いのは強みだと確信している。

30代ではじめてこのブログを作った私、知識なんて皆無でネット検索からなんとかサーバー借りて、ドメイン取ってと、よちよち歩んできました。

ワードプレスやブログの始め方書き方はみなさんすんばらしい記事を書いてくださってるので、書いてある通りにやれば私のようなズブの素人でも一応開設することができましたが…

壁にぶち当たります。

問題が起こった時に何もかも意味不明。

検索しても、「headタグの下に貼り付けて〜」とか「functionの」とか1つ1つ調べなくてはならないので時間のかかること。

ちゃんぴー
でもせっかく頑張って開設したので地道に勉強をしようと思います!!

 

で今回、前々から悩んでたけど無視していたTwitterカード問題についてなのです。

 

結論から言えばすごい簡単に解決しましたので、解決法だけ読みたい方は目次より飛んでください。(各種設定については私が説明するまでもないと思うのでしません。)

要するに今回は、設定は合ってるはずなのにTwitterカードがうまく表示されないという悩みに対して初歩的なことで解決できた私の経験談です。

症状は様々なので必ず解決する方法とは限りませんが1つの参考にしてください。また、初心者ブロガーをターゲットにしている玄人マーケッターの方の参考にもなるでしょうか😢

おヒマな方は30代機械オンチ女子が無い知恵絞って丸一日試行錯誤した様子も読んでいただけると嬉しいです😂

この記事作成時  wordpress:5.4.2 / テーマ:giraffe

第一の問題・URLの文字化け

私のブログでTwitterに関するプラグインだと「All in One SEO」「Jetpack」の2つを使っています。どちらの設定も検索して得た知識ではありますが問題なく設定できていました。

当初は自動共有に設定していたので、ブログを更新するとTwitterにしっかりUPできていました。しかし…URLに日本語を使っています。これは現在もなんですが、色々考えた結果使用しています。

Twitterに自動投稿したものがこちら


こんな感じでURLの日本語の部分が文字化けというか暗号のような怪しさ満点で表示される投稿になってしまいます。

これも含めて、当時はいじるのもよくわかんないし…まぁよしとしていました。

ちょうどこの頃、何も考えずにパーマリンクの設定をいじってしまい大変な目にあいます。この時にパーマリンクに日本語を使わない設定にすればよかったのですが、パニックもありその他の考えもありせっかくいじったのに結局日本語ありの設定で事をおさめました。 この経験でパーマリンクの変更は2度とするものかと心に誓います。

しかしやはり文字化けが気になり始まった頃…

 

第二の問題・Twitterカードが表示されない

他の人がツイートしてるリンクではTwitterカードで表示されるのに私のはなぜカードじゃないの?

➡︎ 設定していなかったので当たり前でした。

これもググってそれ通りに設定しました。Twitter側でも私のサイト側でも設定は問題なさそう。なのになぜかカードの状態で表示されない。

第一の問題の時と変わらない状態です。

第一・第二の問題が急に解決する

第一・第二の問題に加え、ブログ更新のツイートに一言付けたいんだよなぁと色々触ってたら「ツイートする」から編集画面で直接リンクをコピペするとちゃんとカードで表示される事が判明。

文字化けはおそらくURLに日本語を使ってる限り無理だろうしと思っていたけど、なんとURLは表示されないじゃないか。

それならこのままでいっか😽と悩みが一気に解決します。

以降、プラグインの自動共有設定を切って手動でブログ更新のツイートを投稿することにしました。

この時点で私のブログ更新のツイートのやり方は

  1. 投稿したページをWebで開く
  2. 一番上のURLが表示されてるところをクリックしてコピー
  3. Twitter「ツイートする」編集画面でペースト
  4. 一言を加えてツイート
ちゃんぴー
超原始的でお恥ずかしい😂

 

第三の問題・Twitterカード表示崩れ

今までと同じ手法でブログ更新ツイートしてたんですが急に、なんか写真が内容と違う🤔
投稿編集画面の

ここ↑いじったかなーって思ったけどそんな記憶ないし。

気付いたらリンク先が記事ではなくサイトトップページになっていたのです。しかも写真は全然関係ない記事の写真になったりしてるのです。

 

 

ちょっと前まで問題なかったのに…

新しくプラグイン追加したり色々設定をいじっていた時期なので、何か仲良くない設定をしてしまったのでしょうか。

色々調べてみると、また始まりました。「headタグの〜」「functionの〜」あーもうこれ苦手😭素人がこんな事始めてすみません!無知ですみません!!てPCに向かってめっちゃ謝りました(笑)

ちゃんぴー
へるぷみーーーーー(T_T)

 

解決への道が見え始める

でよくよく調べてみたら、「Card Validator」というもので設定があっているか調べられると!

使い方はURLを入れて「Preview Card」ボタンを押すだけ!


あってルーーーーー😭


過去記事やカードタイプを変更してみても表示されルーーーーー😭

エラーコードも出てないーーーー😭

 

こうなってくるともう意味がわからない🤦‍♀️ググったら「反映に時間がかかる、設定が合ってるなら時間が経つと解決する」なんて言ってる記事もあったけど、違う気がするの。

だってカードタイプの変更はすぐ反映されてるもん😭

試しに全部ローマ字のURLの記事をカードタイプを変更して「Card Validator」とツイート編集画面と両方で表示させてみたらちゃんと反映されてるもん😭

 

私は直感します。

時間の問題ではない。日本語URLの問題だ。

 

一日中考えました。

あぁパーマリンク変更したくない…もうあれやりたくない…

そうこうしているうちに、あることに気付きました。

 

URLの日本語部分が読み込まれていない!

要するに、ツイート編集画面の中で私の記事のURLをコピペした時現れるTwitterカードは、後半の日本語部分を消しても消さなくてもトップページへのリンクが表示されているのです。
(じゃあなぜ写真がデフォルトじゃないんだ、という問題は無視する)


確かに、昔悩んだ文字化けはしてないのはその部分を読み込んでないからだ!

なぜ急にURLの日本語部分を読み込んでくれなくなったのでしょう❓とにかく読ませる必要があります。

早速ググったらWebでも変換できるらしい。

検索してこちらのサイトにお世話になり、日本語部分をエンコードして(言葉を覚えた)例によって暗号みたいなURLに変換したものを作成します。
(リンクフリーとのことなので喜んでシェアさせていただきました!)

これをツイート編集画面にペーストしてツイートしたら


大騒ぎしたことは全て解決しました。

 

解決策をまとめます

 

  1. 日本語入りURLをエンコード
    (上記サイトなど利用)
  2. コピペでツイートする

 

以上。

 

直後、さらに単純な解決法が見つかる

 

  1. リンク付でシェアしたいページをWebで表示する
  2. 公開済記事のここ↓など、シェアボタンからシェアする


ワードプレスって、プラグインって、優秀ですよね。

いつまでもコピペしてる時代じゃないんだね。

ここからシェアすればちゃんとエンコードしてくれるんだね。

当たり前だよね。言っててつらくなります。

 

いるかわかりませんがこの機能を実装していない方がいましたらサイトでエンコードするやり方でどうぞ。

まとめ

すっごい色々調べたんですが、単純すぎてこんなことに悩む人は私だけなのか、ググってもこの簡単な解決策は見つけられませんでした。

これで全てが解決するとは限りませんがこんなことで解決する場合もあるんだというくらいで受け止めていただけたら幸いです😂

きっと一人や二人くらいは同じ悩みを持つ人がいるかと思いますので、私の備忘録の意味でも記事にしました。

これに懲りてパーマリンクの設定を今後いじるかは……悩みます。

現場からは以上です😭😂

 

この記事を書いている人 - WRITER -
ちゃんぴー
脱サラしてスノーボードのある生活を選んだ、30代独身女子。8年間雪山こもり中。人と違う生き方をするのは色々大変だけど、たくさんの経験をして今の生活が自分に合っていることを実感し、転職経験が多いのは強みだと確信している。







- Comments -

メールアドレスが公開されることはありません。

Copyright© 30代からのSnow Life , 2020 All Rights Reserved.