（テンプレートの「HTMLの編集」からHTMLを編集します。方法はこちら）
（行間がガタガタで非常に読みにくいですが、力尽きました。すみません。お許し願います＞＜）
<meta content='ブログのタイトル' property='og:title'/>
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:else/>
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
<meta content='画像のURL' property='og:image'/>
</b:if>
<meta content='XXXXXXXXXXXXXXX' property='fb:app_id'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@TWITTER_ID' name='twitter:site'/>
<meta content='ブログの説明' name='twitter:description'/>
<meta content='ブログのタイトル' property='og:title'/>
ちょいちょい解説していきます。
（まぁ、これそのままコピペして、オレンジのところを改変すれば、それなりには動くと思います。）
<meta content='ブログのタイトル' property='og:title'/>
ここに、ブログのタイトルを設定します。
いいね！された時や、TwitterにブログのURLが載った時、タイトルとして出てきます。
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:else/>
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
<meta content='画像のURL' property='og:image'/>
</b:if>
ここで、FacebookやTwitterで表示される画像と、ページの種類を決定しています。
はじめの
<b:if cond='data:blog.pageType == "item"'>
以下（2つめの）<b:else/>までは、ブログの記事ページに対する設定です。<meta content='article' property='og:type'/>
でこのページの種類が、ブログの投稿であることを宣言し、
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
で、ブログ中に画像があればその画像を用い、なければサムネイル画像を用いよと設定してあります。
両方ともない場合は、なんか勝手に適当に画像を見繕ってくれるらしいので、今は放置。
（2つ目の）<b:else/>以降で、トップページに対する設定をしています。
<b:else/>
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
<meta content='画像のURL' property='og:image'/>
</b:if>
他にも、data:blog.pageTypeには、値としてarchiveやindex等もありますが、特にそのページについては今回はOGPを特別には指定しませんでした。
指定したければ、<b:if cond='hogehoge'>を利用して、分岐を入れればいいと思います。
次に、FacebookやTwitter用の設定をします。
<meta content='XXXXXXXXXXXXXXX' property='fb:app_id'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@TWITTER_ID' name='twitter:site'/>
<meta content='ブログの説明' name='twitter:description'/>
この部分です。
が、僕が劣化説明をしてもしかたがないので、詳細は、
FacebookのOGP設定方法＋参考記事6選
に譲ります。
ただ、上記ブログでは、twitter側の設定は2行でOK途ありましたが、それだと動きません。
ブログ中でオプションプロパティとされている
<meta property="og:description" content="ここにページのディスクリプション" />
かまたは、上記<meta content='ブログの説明' name='twitter:description'/>
のどちらかは必須です。最後に、<head>タグに
<head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#'>
を追加すればOK！
最後の最後に注意事項ですが、
テンプレートの編集を終えた後、記事で動作の確認をするのですが、
テンプレート編集以前に書かれていた記事ではうまくいかない事があります。（僕はそれでスタックして死んだ。原因は不明です）
動作確認のために、新記事を書いてみて、それで動くか試してみてください。
↓ 面白いなと思ったらSNSでシェアしよう！ ↓
Tweet
0 件のコメント:
コメントを投稿