vetaでトップ画面のTwitter用OGP画像を設定する

vetaでトップ画面のTwitter用OGP画像を設定する方法についてまとめます。

その準備として、まずトップ画面のOGP画像にしたい画像をBlogger上にアップロードする必要があります。

Bloggerの記事またはページを新規作成し、下書きのままで構わないのでそこに画像を貼り付けましょう。

貼り付けた後、画像を右クリックすると「画像アドレスをコピー」という項目があると思うのでコピーします。

そのままBlogger編集画面にある「テーマ」の項目から「HTMLの編集」を選択します。


そしたらわけわからない呪文が現れると思います呪文の上の方にあるこの部分を探してください。

<!-- sns ogp -->
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='Image URL' name='twitter:image:src'/>
</b:if>

この部分の一番最後にある<meta content='Image URL' name='twitter:image:src'/>

これのImage URLのところに、先ほどBloggerにアップロードした画像のURLを貼り付ければOKです。

OGP画像の表示についてはこちらのTwitter公式ツールから確認できるので、設定が終わったら確認してみましょう。

https://cards-dev.twitter.com/validator