🕵️「X」のCEOが変わって早2年、現在のXシェア仕様を調査＆検証してみました🖊️

2024年5月24日 16:02

チョコミント味のお菓子がたくさん出てきて嬉しい、デザイナー兼チョコミン党の「C」です！

近年SNS「X」で頻繁な仕様変更が続いていますが、当社のサービスでは利用ユーザーの多くが「X」を利用しており、当社も広報活動に積極的に利用しているので、この変化に柔軟に対応していかなければなりません。

っというわけで今回は業務内で上がったX（旧twitter）関連の挙動についてまとめました🕵️
LPにシェアボタンを設置する際の参考にしてみてください。

⚠2024年4月時点の情報です⚠
仕様が変わる可能性は大いにありますのでご留意ください。

🕵️URLの表示について

・ポスト時の`http://`は省略される
・URLが長いと省略される
・URLは短くても長くても半角23文字カウント扱い

📣本来のポスト内容

 - シェアで応援投票 - 
東京ドームシティ アトラクションズ×クロケスタコラボ
東京ネバーランドシティ ボーナスステージ 朱鷺燈 一夜に1TP投票しました

あなたもXのシェアで応援しよう！
https://clockoverorquesta.com/extra/tokyo-neverland-city/?chara=1

#東京ネバーランドシティ一夜応援投票
#東京ドームシティアトラクションズ

👩‍💻実際にXで表示されたポスト

🕵️URLが表に出る時と出ない時がある

以下の条件でURLはポスト上に表示されません

・リンクが一つだけ
・リンクの後に文字もハッシュタグも入れない（テキストの最後に入れる）
・URL以外もテキストは入れる

📣本来のポスト内容

- シェアで応援投票 -
東京ドームシティ アトラクションズ×クロケスタコラボ
東京ネバーランドシティ ボーナスステージ
朱鷺燈 一夜に1TP投票しました

あなたもXのシェアで応援しよう！

#東京ネバーランドシティ一夜応援投票
#東京ドームシティアトラクションズ
https://clockoverorquesta.com/extra/tokyo-neverland-city/?chara=1

👩‍💻実際にXで表示されたポスト

📣本来のポスト内容

📷️特設サイト
https://special.clockoverorquesta.com/extra/matching

👩‍💻実際にXで表示されたポスト

🕵️リンクURLが2つある時、1つは消える

・OGP画像が適用されるのは最後に入っているURL
・URLの後に文字やハッシュタグが続かなければ、最後のURLは消える

📣本来のポスト内容


一つ目！！！！！
https://clockoverorquesta.com/season2_battle1/

二つ目！！！！！
https://special.clockoverorquesta.com/extra/matching

👩‍💻実際にXで表示されたポスト

🕵️同じURLでもOGPを出し分けたい

🆗phpが使える場合
- パラメータをつけて、それにより分岐させる（参考）

🆖phpが使えない場合
- 出し分けたい分「html」ファイルを用意して、メインページにリダイレクトさせる
- SEO→canonicalを親ページのものにちゃんとリダイレクトすれば大丈夫

🕵️OGPってアニメ化できるの？

OGPを「gif形式」にすれば動かせる！
が、Xポスト時では効果なし…
Slack、Notion、noteだけかもしれない。

🕵️OGP画像形式の最的確は？

今年からLINEやFacebookでも「WebP」画像がサポートされたようです👏（2024年4月に検証し確認）

Facebookシェア時
右上にインフォメーションボタンが被るので注意されたし！

WebP形式は軽容量なのが魅力ですが、海外サイト向けページの場合では使用アプリやツールも多岐にわたるため「jpg」「png」が安全かもしれません、検証も難しいですからね。

🕵️ハッシュタグの挙動

- #で始まり、ハッシュタグに使えない文字が来るかツイート末まで続く
- #はツイート頭にあるか、#の前にはスペースが必要
- 数字やマークだけではハッシュタグにはならない

🕵️aタグの記述について

・<a>タグのhref属性でリンク先の設定を行う際に、記述として `share` もしくは`intent/tweet`の2通りよく見ますが、PCではshareだとうまくツイートできないバグがあったので見かけたら書き換えることおすすめします！

・LPのコーディングテンプレートは`intent/tweet` だったので基本は気にしなくて大丈夫なはずです

🆗PCでもOK

<a href="https://twitter.com/intent/tweet?text=- シェアで応援投票 -%0a東京ドームシティ アトラクションズ×クロケスタコラボ%0a東京ネバーランドシティ ボーナスステージ%0a朱鷺燈 一夜に1TP投票しました%0a%0aあなたもXのシェアで応援しよう！%0a%0a%23東京ネバーランドシティ一夜応援投票%0a%23東京ドームシティアトラクションズ%0ahttps://clockoverorquesta.com/extra/tokyo-neverland-city/?chara=1" target="_blank" rel="noopener">

🆖PCだとダメ（クリック反応しない）


<a target="_blank" href="https://twitter.com/share?url=https://twitter.com/ClQST_info&text=僕らは願ってしまった――　12人の少年と運命を選択するSNS連動型キャラクターソングCDプロジェクト。『Clock over ORQUESTA(クロック・オーバー・オルケスタ)』&hashtags=ClockoverORQUESTA,クロケスタ">

🕵️絵文字はエンコードせずそのまま入力してOK！

ただし！閲覧環境のOSによっての差異に気をつけましょう！
同じOSでもバージョンでも違って見えるケースも…💦

え、待って待って🤭←
今ってこの絵文字上の奴なの？
全然意味変わってこない？😂
自分まだ下のままなのですが笑

使いどころによっては、相手煽ってるみたいになっちゃいますね🤭 pic.twitter.com/VFdCjOYOhd
— ゆずと🌿柚子ログ📝 (@aoto_yuzuto) January 8, 2023

🕵️おまけ：LINEでのシェア文言についての注意点

Xではありませんが、LINEではシェアテキストに「500円」「¥500」など金額を入れると、金額表記部分が「LINE Pay」での送金リンクになるので注意！

🕵️まとめ

Xは便利なSNSですが、仕様は日々変わっています。
本内容も１年後にはガラリと変わっている可能性もあります。

今日覚えていってほしいのはシンプルに
「ページのリリース前には必ずシェアテスト行いましょう💪」です。
※鍵付きアカウントを用意しておくと情報漏洩も防げます。

🙋viviONでは一緒に働く探偵…ではなく仲間を募集しています！

ユーザーとクリエイターが楽しみながら、幸せに生きていける社会にする。株式会社viviONでは、一緒に働く仲間を現在募集しています。少しでも業務内容やカルチャーに興味を持っていただけましたら、是非お気軽にご応募くださいませ。

この記事が気に入ったらサポートをしてみませんか？