Google検索で上位表示するための基礎コース【SEO対策 入門講座】by Udemy

解決!チャットワークのシェアボタンとEightのシェアボタンで日本語URLの記事がエンコードできなかった件。

解決!チャットワークのシェアボタン、Eightのシェアボタンで日本語URLの記事がエンコードできなかった件。

チャットワークの公式シェアボタンと名刺アプリEightの公式シェアボタンを実装したという記事を公開して、どちらでも「日本語URLがエンコードされない問題」があることを書きました。

その後、お世話になっている株式会社再喜動の中島さんがEightでシェアしてくださり、Eightの方が調査してくれるとの流れになりました。

が、自分でなんとかならないのかと調べて、あれこれと試してみたところ、問題解決できたのでシェアしておきます。今回はシェアボタンの仕組みやphpが多少わかる方向けなので細かい解説はしません。

WordPressで記事の日本語URLをエンコードして読み込む必要がある

WEBマスターの手帳はWordPressで作られています。そしてシェアボタンでは「シェアするURL」を指定する必要があります。

つまり各記事にシェアボタンを設置するには、phpを利用して動的に、その記事URLを読み込む必要があるわけです。この時に日本語URLでなければ、チャットワークのシェアボタンもEightのシェアボタンも何の問題もなくシェアすることができます。

ですが、WEBマスターの手帳では日本語URLを使っています。これが今回の問題の根源です。

日本語URLの問題点

日本語URLをリンク先などに指定する場合は日本語URLをエンコードと呼ばれる英数字に変換する必要があります。(日本語部分をそのまま書いても認識されません)

つまりシェアボタンでも記事URLがエンコードされずに日本語のまま読み込まれるとURLとして正しく表示されないわけです。

日本語URLをエンコードの例

エンコード前の日本語URL↓

homepage-reborn.com/2016/08/09/名刺アプリ「eight」の公式シェアボタンを実装しま/

エンコード後の日本語URL↓

https://homepagereborn.com/2016/08/09/%E5%90%8D%E5%88%BA%E3%82%A2%E3%83%97%E3%83%AA%E3%80%8Ceight%E3%80%8D%E3%81%AE%E5%85%AC%E5%BC%8F%E3%82%B7%E3%82%A7%E3%82%A2%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%BE/

このエンコード後のURLが長くなるので嫌がる人もいます。

記事URLの読み込み方が間違っていた

WordPressで記事のURLを表示するには、一般的に以下のphpタグを使います。

<?php the_permalink(); ?>

記事のリンク先として使うこともできます。

<a href="<?php the_permalink(); ?>">リンク</a>

Facebookやはてブのシェアボタンをオリジナルデザインで実装する場合に、このphpタグをシェアするURLの指定に使っても機能します。

ですがチャットワークの公式シェアボタンも、Eightの公式シェアボタンも、このphpタグを使うと正しくURLが読み込まれないようで、シェアする際に正しい表示になりません。

チャットワークのシェアボタンがエンコードされない Eightのシェアボタンがエンコードされない

そこでTwitterのシェアボタンで使用している、以下のphpタグを使ってみましたが、それでもうまく表示されませんでした。

<?php echo $url_encode ?>

あれこれと調べて最終的に辿り着いた解答が以下のphpコードです。このコードをURLの指定に入れたところ、日本語URLが正しくエンコードされました。

<?php $url = get_permalink(); echo urlencode($url);?>

やっとチャットワークのシェアボタンもEightのシェアボタンもシェアボタンとして正しく機能するようになりました!

チャットワークで日本語URLがエンコードされた Eightで日本語URLがエンコードされた

やっぱり自分で試行錯誤して解決するのが、他の人の手を煩わせなくて済むし、解決する最速の手段かもしれない。外に頼むとどうしても時間がかかってしまうのは仕方ないんだけど…

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA