ポケモンGOは、どこの公園でやるべきか?公園別の出現するポケモンまとめ次のつぶやき→【ポケモンGO】近くにポケモンがいることを教えてくれるAndroidの時計次のつぶやき→体が硬い人のダイエットメニュー完成!お腹・脚・背中・胸の4パターン!次のつぶやき→ポケモンGOの影響かマック赤坂さん人気に次のつぶやき→ポケモンGOのジムに選ばれている噴水、長時間の滞在しないように張り紙次のつぶやき→ポケモンGO、日比谷公園の中でもオススメの場所次のつぶやき→ポケモンGO、地元の状況と日比谷公園の比較してわかった公園が盛り上がる理由次のつぶやき→ポケモンGO、日本でリリースされて7時間後サーバ落ちる次のつぶやき→ポケモンGO、海の上から移動できないバグ?対象方法あり次のつぶやき→ポケモンGO、やっぱり京都は強かったポケストップがめっちゃくちゃあるwwww

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

スポンサーリンク

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

2013年ブログのメタ情報で3倍得する設定まとめ。

2013年もうそろそろ終わりますね。

そこで、attripが厳選する。今年新たに追加したメタ情報をお伝えします。

この設定やっておくとこんなに事であなたのサイトがシェアされやすくなったり速くなったりちょっぴりリッチに見せることができるよ。

 

1.Twitterカードの設定で画像を大きく表示しよう!!

Twitterカードは、ツイートされた際に表示されるメタ情報です。

何も設定していないと テキストとリンクだけが表示されますが

僕のおすすめは、 Summary Card with Large Image

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

こちらメタ情報で記述することによりつぶやきの表示がこんな風に大きく表示されます。

つぶやきをクリックした際に大きく表示されたらついつい見たくなっちゃいますよね?

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://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年メタ情報最適化

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

スポンサーリンク

\ SNSでシェアしよう! /

人気記事ランキング

スポンサーリンク

ankerのライトニングケーブル
anker充電機器
この記事を書いたのはです!

アットトリップです。このブログの管理人です。
著書:Facebookコミニティ成功の法則


メールアドレスを入力して無料購読しよう!




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

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

タグ: , , , , ,

記事URL:http://attrip.jp/122040/


フォローよろしくお願いいたします。

mautic is open source marketing automation
お問い合わせこのサイトについてサイトマップ広告のご掲載について
おもしろ動画レシピ筋トレストレッチ糖質制限ダイエット