前説
今回はGlideでTwitterカードを表示したかったために色々やった話です
結論から言いますが、できませんでした！
それでも勉強になったこともあるので残して置きます
僕は今、ノーコードツールのGlideを使ってフォトスポットを共有するアプリを作っています
是非登録してね！
閑話休題
でその中に、Twitterに共有する機能をつけました
ここまでは順調でした
で、せっかく写真があるのだからツイートの中にその画像を埋め込みたいと思いました
ニュースサイトとかを共有するときにサムネイルが一緒に表示されるアレです
ここからが本題です
Twitterカードとは
上で散々出てきましたが、Twitterカードとは何なのかというと、ツイートにリンクを貼り付けたとき、URLだけでなく、リンク先の画像やテキストを表示してくれるアレです
画像がある方がタイムラインに流れてきたときに目を引きやすいと思うので是非導入したいと思いました
Twitterの開発者プラットフォーム
を覗いてみるとメタタグを使用することがわかりました
コレでやることが明確になりました
- ページごとのメタタグを用意する
- Glideにメタタグを挿入する
メタタグの用意
Twitterカード用のメタタグはいくつかありますが、以下のタグを設定することにしました
<meta name="twitter:card" content=" カードタイプ "></meta>
<meta name="twitter:title" content="ページタイトル"></meta>
<meta name="twitter:image" content="画像URL" ></meta>カードタイプはページによって変更する必要もないので ”summary” とベタ書きにします
ページタイトルは後でやるとして、先に画像URLを作りました
- Glideのデータベースに『テンプレート』を挿入
2. テンプレートを設定する
・TEMPLATE
<meta name="twitter:image" content="?{tweet_image}" />・REPLACEMENTS
?{tweet_image} / データベース上の画像のURL
こうするとTEMPLATEの『?{tweet_image}』が画像のURLに置き換わります
OKです
メタタグの挿入
続いてメタタグの挿入です
といってもGlideのコンポーネントにタグはありません
そこで、ググったところ、素敵な動画を見つけました
なるほど、リッチテキストコンポーネントを使うんですね
というわけで設定してみました
……おそらくこれは誤りです
動画の中では『タグ』と言っています
一方、僕が設定したいのは『メタタグ』です
Twitterのメタタグは<head>の中に書かないといけないのですが、これでは<body>の中に入ってしまいそうです
が、この段階で気づくことができませんでした。残念
そんなこんなで設定をして試してみたのですが当然のように目的の画像は表示されず
ここから少し迷走します
ソースを見てみる
困ったときはソースを見る、ということで見てみたところ、それっぽいものが挿入されています
<meta name="twitter:image" content="https://firebasestorage.googleapis.com/v0/b/glide-prod.appspot.com/o/pwa-assets%2FgICu6vjjyssd4jcht1IJ-icon-512.png?alt=media">ここでポイントなのはそれっぽい、です
1週間くらい後になって気づいたのですが、上のコードで参照されている画像、Glideのアプリに設定しているアイコンの画像だったんです
『メタタグと画像のURLが挿入されている』
ということだけで油断してしまい、参照先まで見ていませんでした……
反省
- 使い慣れている環境ならいざしらず、まだまだ使い慣れていない環境（Glide）を使う際にはちゃんと仕様を確認しないと行けない
英語だからといって嫌がらずちゃんと読まないといけないですねぇ - 『メタタグが挿入されている』ことと『メタタグに画像URLが貼られている』ことを同時に確認してしまった
テストは一つずつ！普段仕事ではやっているハズなのにプライベートだとつい油断してしまうんです……
以上です！
コメント