2015年1月9日金曜日

@尾道bogを Twitter cards に対応させる

尾道apartment-P のブログ「＠尾道blog」はGoogleのbloggerをホストにしてますが、エントリを公開した後で、TwitterにブログURLを貼付けてる方もいらっしゃるようなので、せっかくならTwitter cards に対応させてみたらどうかな。簡単だし。

方法は以下のとおり。

Spring wandering
この写真はTwitter card引用様のダミーです。エントリとは関係ありません。

編集画面でコピペだ

ダッシュボードを表示したら、テンプレート →  HTML の編集

だらだら書いてあるコードのわりと上のほうにある <head> を探して、次の行を改行で数行あけて、そこに以下のペースト。

 @teraminato は自分のTwitterアカウントに。
teraminato.apap.co4.jp  は自分のドメインに。それぞれ修正。

<!-- twitter cards -->
<meta name="twitter:card" content="photo"/>
<meta name="twitter:site" content="@teraminato"/>
<meta name="twitter:creator" content="@teraminato"/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta name="twitter:url" expr:content='data:blog.url' />
<meta name="twitter:title" expr:content='data:blog.pageName' />
<meta name="twitter:description" expr:content='data:blog.metaDescription'/>
<b:else/>
<meta name="twitter:url" expr:content='data:blog.homepageUrl' />
<meta name="twitter:description" expr:content='data:blog.metaDescription'/>
</b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name="twitter:image"/>
<meta name="twitter:title" expr:content='data:blog.title' />
<b:else/>
<meta content='http://teraminato.apap.co4.jp/favicon.ico' name="twitter:image"/>
<meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>
※上記は他flickrなど外部サイトのみに画像を保存した場合、正常に動作しませんでした。

<!-- twitter cards -->
<meta content='photo' name='twitter:card'/>
<meta content='@teraminato' name='twitter:site'/>
<meta content='@teraminato' name='twitter:creator'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<b:if cond='data:blog.postImageUrl != &quot;&quot;'>
  <meta expr:content='data:blog.postImageUrl' name="twitter:image" />
<b:else/>
  <meta content='http://teraminato.apap.co4.jp/favicon.ico' name="twitter:image" />
</b:if>


Twitter社に申請だ。

あとは Twitter の Card validator にアクセスしてCard URLに、どれでもいいので(例えば最新の)エントリのURLを送信して確認。問題なければ      Request Approval     をクリック。
(Twitterが日本語モードだと表示は違うかもしれないけど)




そしてうまくいけば、数分後からTwitterにブログURLはりつけるとこのように概要が表示されるようになるのです。簡単です。


検索向け説明を活用だ。

FB や Twitter などで写真と一緒に拾われる短い説明を編集できます。
デスクトップWeb版なら編集画面の右ペインにあります。ここに短く説明しましょう。
もちろんですが、これはTwitterやFBで拾われた後で修正しても、すでに表示されたそれらSNSには反映しません。編集した後でTwitterやFBでURLを引用された場合に有効です。

で、もし、自分の画面には 検索向け説明 の編集フォームが無いって場合は、ダッシュボードで設定＞検索設定＞メタタグ＞説明　を有効にしてください。


投稿者 時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)