Threadsでは出るのにX(旧Twitter)だけ出ない!?BloggerでブログカードをiPhoneだけで一瞬で表示させる方法
最近普及している「Threads」では、URLを貼るだけで自動的にアイキャッチ画像付きの綺麗な「ブログカード」が表示されるのに、**「X(旧Twitter)に貼ると、ただの味気ないテキストリンクになってしまう……」**と悩んでいませんか?
実は、私のブログでも全く同じ現象が起きていました。
「せっかく素敵なアイキャッチ画像を作ったのに、Xだと全然目立たない!」
「これ、どうやって直すの?」
ネットで解決策を調べてみると、よくこんな手順が書かれています。
これ、実際にiPhoneでやろうとすると、とんでもない罠にハマります。
1. 「すべて選択」ボタンが反応しない: Bloggerの編集画面は特殊なため、スマホだと長押しして「すべて選択」をタップしても反応しないバグが多発します。
2. ファイルをメモ帳に共有すると中身が編集できない: XMLファイルをダウンロードしてiPhoneのメモアプリに共有すると、テキストではなく単なる「アイコンファイル」として添付されてしまい、中身を書き換えることができません。
「やっぱりPCがないと無理なのかな……」と諦めかけましたが、実はものすごい盲点を発見したんです!
わざわざファイルをダウンロードしたり、メモ帳アプリに移したりする必要は一切ありませんでした。
なぜなら、書き換えるべき目印となるコードは、何千行もスクロールした先にあるのではなく、実はブログテンプレートの一番最初、おおむね10行目前後のすぐ見つかる場所にあったからです!
(ちなみに私の環境の『Essential』というテーマでは、画面を開いた瞬間のたった7行目に最初から見えていました!)
つまり、画面を開いた瞬間の場所に、直接コードを1回コピペして保存するだけで終わるのです。
今回は、iPhoneだけで1分で完結する「一番シンプルで失敗しないブログカード表示手順」をまとめました!
そもそも、なぜX(Twitter)だけブログカードが出ないの?
原因はとてもシンプルです。
Meta系の「Threads」や「Facebook」などは、一般的なWebサイト用の共通タグ(OGPタグ)を自動で読み込んでカードにしてくれます。
しかし、X(旧Twitter)は「X専用のメタタグ(twitter:card)」がブログのHTML内に書かれていないと、頑なにただのテキストリンクとして処理してしまう仕様だからです。
Bloggerの標準テーマにはこの「X専用タグ」が入っていないことが多いため、こちらで数行だけコードを書き足してあげる必要があります。
iPhoneだけで完結!Xカード表示設定の3ステップ
それでは、実際に行った手順を解説します。
ステップ1:X用タグをコピーする
まずは、以下のコードを長押しして、丸ごとコピーしておきます。
<!-- X(Twitter)カード設定 -->
<meta name='twitter:card' content='summary_large_image'/>
<meta name='twitter:site' content='@あなたのXユーザー名'/>
<b:if cond='data:view.featuredImage'>
<meta expr:content='data:view.featuredImage' name='twitter:image'/>
</b:if>
ステップ2:Bloggerの「HTML編集」で、最初の10行目あたりを探す
1. Bloggerの管理画面から 「テーマ」 をタップします。
2. 「カスタマイズ」の右側にある 「▼」ボタン をタップし、「HTML を編集」 を選択します。
3. コードがずらりと並んだ編集画面が開きます。
4. ここで画面を1ミリもスクロールせず、一番上をじっと見てみてください。おおむね10行目前後(テーマによって多少前後します。私のEssentialテーマでは7行目でした)に、以下の目印となるコードが最初から見えているはずです!
<b:include data='blog' name='all-head-content'/>
ステップ3:直接貼り付けて保存する
1. 見つかった <b:include data='blog' name='all-head-content'/> の行の、一番最後の文字の後ろあたりをタップして、カーソルを点滅させます。
2. キーボードの 「改行」 を1回押して、次の行に新しいスペースを作ります。
3. 空いたスペースをタップして、ステップ1でコピーした**X用のタグをそのままペースト(貼り付け)**します。
【書き換え後のイメージ(こうなればOK!)】
1. 貼り付けが終わったら、画面右上にある 「保存(フロッピーディスクのようなアイコン)」 をタップします。
お疲れ様でした!これだけで全ての作業が完了です!
設定したのにブログカードが出ない!?そんな時の「確認の裏ワザ」
設定が終わってすぐ、さっきダメだったURLをXに貼っても「まだカードが出ない……」となることがあります。
これは、Xのシステムが「このURLはただのリンク」という古いデータ(キャッシュ)を数日間記憶しているせいです。
本当にカードが出るようになったかテストするために、URLの末尾にダミーの文字を付け足してXに貼り付けてみてください。
例: https://自分のブログURL.blogspot.com/xxx.html?x=1
末尾に ?x=1(数字は2でも3でも何でもOK)と付けることで、Xが「新しいURLが投稿された!」と認識し、今設定したばかりの最新のHTMLを直接読み込みに行ってくれます。
これで無事に画像つきのカードが表示されれば、設定は大成功です!
まとめ:これからは1発でブログカードが出る!
今回のように「一度Xに貼って失敗してしまった古い記事」は、Xが記憶を消してくれるまで ?x=1 などのダミー文字をつける必要があります。
しかし、今後新しく書くブログ記事については、ダミー文字を一切つけなくても、最初から自動で綺麗なブログカードが表示されるようになります!
「ファイルをダウンロードして、メモアプリに共有して……」という無駄な苦労は一切不要。
実は最初から一番上に見えているので、iPhoneだけで直接コピペすれば一瞬で解決できるのです。
同じように「Xだけカードが出ない!」と諦めていたスマホユーザーの方は、この最もシンプルで確実な方法をぜひ試してみてくださいね!
Comments
Post a Comment