【Tips】noteのタイトルとTwitterのリンクカードを二重化して別のものにする方法

よくきたな。お望月さんだよ。

今日はnoteのTipsとして、noteのタイトル画像とTwitterで表示されるリンクカードの画像を別のものにする方法を教えるよ！

なんの役にたつんだろう？ ふしぎ！！

事例

Twitterのリンクカード（しゅげんしゃさん、おゆるしください！）

noteのタイトル画像

なぜこのようなことが起こるのだろうか？それはインターネットの英知と進化に関係があった。

キャッシュそして共同キャッシュ

インターネットアクセス時に画像などを一時ファイルとして保存してアクセス速度を上げる技術「キャッシュ」があります。なんども見る画像をいちいち呼び出したらテレホタイムが終わってしまうからです。

この技術はTwitterにも応用され、Twitter用のリンクカードの画像は最初に開いた時の画像が固定されるようになりました。仮に共同キャッシュとでも呼びましょうか。

これはよく弊害を起こしており「タイトル画像を差し替えたのにリンクカードが変わらない！」という状態を巻き起こします。

その場合は以下のリフレッシュ機能で青い鳥さんにキャッシュをクリアしてもらおうね！

TIPS: note等で表示されるリンクカードを古いものから新しいものへリフレッシュするツールです。

対象URLを打ち込み青い鳥さんに鳥葬してもらいましょう。https://t.co/azaz88MNBY pic.twitter.com/fgDKveut41

— お望月さん (@ubmzh) October 20, 2018

タイトル画像二重化の狙い

というわけでこの手の仕様を意図的にずらして利用するのが今回のタイトル画像二重化のキモです。

手順

①記事を「リンクカードで表示させたい画像」で投稿。
②投稿した記事をTwitter上でシェア
③Noteの記事のタイトル画像を本当のものに差し替える。

狙い①

芋煮会記事の読者のニューロンに「標準的な広瀬川」をフラッシュバックさせたかったから。そしてリンクをクリックすると違うタイトル画像の記事へ案内される。「す　で　に　攻　撃　は　は　じ　ま　っ　て　い　る」感。

狙い②

文字数が限られていたしコンテストの応募要件から外れないようにしたかったから。ミスマッチな画像でnote内部経由の方々を驚かせたりしたくなかったので……。

未来へ

このテクニックが今後なんの役にたつかはわからない。けれど、タイトル画像のリフレッシュ方法については便利だから持ち帰ってほしい。

しゅげんしゃさんもさすがにこんな形でテキストの枠外から攻撃を受けているとは思わなかったことだろう。タグには標準的なことしか書いていません。

なお、タイトル画像の河川は広瀬川ではない。

以上です。

▼いよいよシーズンインした芋煮会の記事はこちら！