2013年ブログのメタ情報で3倍得する設定まとめ。拡散性UP！高速化！最適化！

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で僕は、このように記述しています。

参考にどうぞ。

<!--▼Twitter Card▼-->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@attrip">
<meta name="twitter:domain" content="attrip.jp">
<meta name="twitter:creator" content="@attrip">
<?php if( is_single() or is_page() ){ ?>
<?php while (have_posts()) : the_post(); ?>
<meta name="twitter:title" content="<?php the_title(); ?>">
<meta name="twitter:description" content="<?php echo mb_substr(get_the_excerpt(), 0, 100); ?>">
<meta name="twitter:image" content="<?php if( has_post_thumbnail() ){ $thumbnail = wp_get_attachment_image_src ( get_post_thumbnail_id ( $post->ID ),'large' ); echo $thumbnail[0]; } else { echo 'http://2.cdn.attrip.jp/wp-content/uploads/2012/11/atlogo.png'; } ?>">
<?php endwhile; ?>
<?php } else { ?>
<meta name="twitter:title" content="<?php bloginfo('name'); ?>">
<meta name="twitter:description" content="<?php bloginfo('description'); ?>">
<meta name="twitter:image" content="http://attrip.jp/wp-content/uploads/2012/11/atlogo.png">
<?php } ?>
<!--▼Twitter Card▼-->

attripになっている部分やイメージタグなどは、自分で調整してね。

2.事前レンタリングで先読みしちゃおう！！

<link rel="prerender" href="http://attrip.jp/" />

このようにメタ情報に入れておくと先読みしてくれるよ。
ぼくは、単記事に来た人がトップページを開いた時に素早く表示されるようにこのように記述している。

11分で覚える、IE11対応Web制作のカンニングペーパー(後篇) | ウェブ制作者向けWindows8アプリ開発

http://windows8.submit.ne.jp/start/1216

こちらの記事には、チェック方法なども書いてあるので参考にしてみてね。
あとこの辺にも詳しく載ってます。
事前レンダリングに関して詳しくはこちらのドキュメント

3.Windows8のピン留機能に最適化

Windows8には、ピン留機能というのがあります。
タイルのように並べてすぐに起動できるようになるのですが、こちらのタイル。
実は、サイズを変更することが出来ます。

<?xml version="1.0" encoding="UTF-8″?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="images/smalltile.png"/>
<square150x150logo src="images/mediumtile.png"/>
<wide310x150logo src="images/widetile.png"/>
<square310x310logo src="images/largetile.png"/>
<TileColor>#009900</TileColor>
</tile>
</msapplication>
</browserconfig>

このようなxmlファイルを作って

そのxmlを
このように読み込む

<head>
…
<meta name="msapplication-config" content="ieconfig.xml" />
…
</head>

マイクロソフトのWeb標準対応、IE11そして Windowsストアアプリへ（連載 1/3） | ウェブ制作者向けWindows8アプリ開発

http://windows8.submit.ne.jp/start/1224

2013年メタ情報最適化

まだまだ最適化できてないサイトたくさんあると思いますが今年中に終わらせておきたいですね！

2013年ブログのメタ情報で3倍得する設定まとめ。拡散性UP！高速化！最適化！ is a post from: @attrip　(アットトリップ）

2013年ブログのメタ情報で3倍得する設定まとめ。拡散性UP！高速化！最適化！