2013年ブログのメタ情報で3倍得する設定まとめ。
2013年もうそろそろ終わりますね。
そこで、attripが厳選する。今年新たに追加したメタ情報をお伝えします。
この設定やっておくとこんなに事であなたのサイトがシェアされやすくなったり速くなったりちょっぴりリッチに見せることができるよ。
1.Twitterカードの設定で画像を大きく表示しよう！！
Twitterカードは、ツイートされた際に表示されるメタ情報です。
何も設定していないと テキストとリンクだけが表示されますが
僕のおすすめは、 Summary Card with Large Image
こちらメタ情報で記述することによりつぶやきの表示がこんな風に大きく表示されます。
つぶやきをクリックした際に大きく表示されたらついつい見たくなっちゃいますよね？
Summary Card with Large Image | Twitter Developers
https://dev.twitter.com/docs/cards/large-image-summary-card
WordPressで僕は、このように記述しています。
参考にどうぞ。
attripになっている部分やイメージタグなどは、自分で調整してね。
2.事前レンタリングで先読みしちゃおう！！
このようにメタ情報に入れておくと先読みしてくれるよ。
ぼくは、単記事に来た人がトップページを開いた時に素早く表示されるようにこのように記述している。
11分で覚える、IE11対応Web制作のカンニングペーパー(後篇) | ウェブ制作者向けWindows8アプリ開発
http://windows8.submit.ne.jp/start/1216
こちらの記事には、チェック方法なども書いてあるので参考にしてみてね。
あとこの辺にも詳しく載ってます。
事前レンダリングに関して詳しくはこちらのドキュメント
- Web Developer’s Guide to Prerendering in Chrome – Google Chrome — Google Developers
- Prerender and prefetch support (Windows)
3.Windows8のピン留機能に最適化
Windows8には、ピン留機能というのがあります。
タイルのように並べてすぐに起動できるようになるのですが、こちらのタイル。
実は、サイズを変更することが出来ます。
#009900
このようなxmlファイルを作って
そのxmlを
このように読み込む
…
…
マイクロソフトのWeb標準対応、IE11そして Windowsストアアプリへ（連載 1/3） | ウェブ制作者向けWindows8アプリ開発
http://windows8.submit.ne.jp/start/1224
2013年メタ情報最適化
まだまだ最適化できてないサイトたくさんあると思いますが今年中に終わらせておきたいですね！
