「tokusetsu 2」を使った時、宣伝tweetのサムネイルがおかしくなる問題の解決方法
2016/04/26

煽りタイトルと見せかけてtumblrで特設ページ作ってる人向け解決方法の記事です。
御機嫌よう、蟻坂(@4risaka)です。
twitterカードのサムネイルが意味不明だよ!
tumblrの「tokusetsu」という特設ページ特化のテンプレートを利用して
同人音楽の特設ページを作成されている方も多いかと思います。
で、ですね。twitterで特設ページの宣伝をするのは別にいいんですけど、
tweetにくっついているこれは一体なんですか意味がわかりません。※画像はPhotoshopで適当にでっちあげたものです
しかもこんなんなっちゃってる人、一人や二人じゃなくてすっごいいっぱい居るんですけど、
視覚で最初に判断されるtwitterの宣伝において、見た目が残念なのは意味をなしません。
気になったのが、tokusetsuクラスの素晴らしいテンプレートで
なんでこんなふうになっちゃうんだろう?という素朴な疑問です。これくらい自動でやってくれそうなもんなのですが。
というわけで、調査・確認をして以下に直し方を示しましたので、
クールなサムネイルを掲載して効果を上げましょう。
原因と対処
技術的な詳細は省きますが、twitterカードという
tweetに連携してサムネイルを自動生成するtwitterの機能に非対応と思われる部分があります。
というわけで、これについて簡単に説明した後、直し方を解説します。
変なサムネイルになっている原因
twitterにサムネイルを出すには、HTML上に特殊なコードを入れる必要があり、
これはtwitterのページで解説がされています。
Twitterカード | Twitter Developers
で、tokusetsuは既にこの処理がほとんど既にできていて、何もしなくていいはずなのですが、
Twitter対応だけなぜか適用されないことがわかったので、こいつを補完して対応させます。
現状、Card Validatorを開いて
あなたのtumblrページのURLを入力すると、以下のように出てきてしまうはずです。
うーん、おかしいですね。直しましょう。
解決方法
「tokusetsu」テンプレートが適用されている前提でお話します。
まず、tumblrのテーマ編集画面から、「HTMLを編集」を選択して
ソースを編集できる状態にします(以下の画像はもう対応しちゃってますので適当に流して下さい)。
次に、126行目あたりの
1 2 3 |
{block:Description} <meta property="og:description" content="{MetaDescription}"> {/block:Description} |
の下辺りに、以下のコードをコピー&ペーストしてください。
【追記 2016.4.26】
まさかのミスがあったのでご指摘頂きました。ありがとうございます。
8行目のcontentは{image:Main Image}ではなく{image:Jacket}が適切です(下記は修正済)。
もしコピペもうしちゃったよ!という方がいらっしゃいましたら、お手数ですが修正ください。
1 2 3 4 5 6 7 8 9 10 11 12 |
<meta name="twitter:card" content="summary"> <meta name="twitter:site" content="{Title}"> <meta name="twitter:title" content="{block:PostTitle}{PostTitle} - {/block:PostTitle}{Title}{block:IndexPage} - {text:Circle Name}{/block:IndexPage}"> {block:Description} <meta name="twitter:description" content="{MetaDescription}"> {/block:Description} {block:IfMainImageImage} <meta name="twitter:image:src" content="{image:Jacket}"> {/block:IfMainImageImage} {block:IndexPage} <meta name="twitter:domain" content="{BlogURL}"> {/block:IndexPage} |
tokusetsuの強力な機能によって、サムネイル=ジャケット画像や
ページのタイトル、説明などはテーマ編集から入力しておくと既に適用されているはずです。
実際に適用されていることを、Card Validatorで確認してみましょう。
できてますね。よしよし。
というわけで、あなたの特設ページがtwitterで宣伝した時にかっこよく見栄えするようになりました。
まとめ
tokusetsuは非常に完成度の高いテンプレートであり、
同人作家が誰でもかっこいい特設ページを一瞬で作製できるという点で、
非常に創造性や公平性、広告性が高いです。これを利用しない手はありません。
が、なぜか肝心のtwitter宣伝でコケるみたいなので、MITライセンスに基いて勝手に解消しました。
metaタグにtwitterカード用の各種が抜けているっぽいので、
これについて、GitHubのなんでしたっけ、修正のリクエストをしなきゃですね。
え、M3春の開催秒読みの段階になってから言うなって?気づいたのが22日(金)なんです。