「seo」の記事一覧

Facebookの「いいね」やTwitterの「ツイート」のよう、フキダシなどで数字がついているソーシャルボタンは URLと紐付いてカウントされています。 たとえば、http://example.com/ へFacebookのボタンを設置した場合は こうカウントしていることになります。 「http://example.com/のことを206,317人がいいねと言っています。」 したがって Ajax通信を使い、ひとつのhtmlで色々なコンテンツを出し分けているウェブサイトで コンテンツに付随するソーシャルボタンをつける場合は 2つの対になる機能が必要です。 ボタン設置コンテンツごとに一意のURLを付与する仕組み 上記のURLへアクセスすると、紐づくコンテンツを表示した状態を表示する仕組み コンテンツごとに一意のURLを生成する 対象ブラウザがInternetExplorer10以上が対象でもよいならpushStateをつかうと 簡単にURLの変更とブラウザのヒストリー機能に対応できます。 2014年1月現在なら、スマートフォン専用ウェブサイトなどでしょうか。 パソコンも対象となると、IE9以下を切り捨ててよい案件はなかなかないので ハッシュタグで対応します。 ただ、ハッシュでは万能でなく GoogleやBingは、クローラとの親和性の問題からpushStateを奨励しています。 クローラは、同一htmlのハッシュタグによる差異は無視するしくみになっているので たとえばこの2つのURLは同じものとして認識されてしまうのです。 http://example.com/index.html http://example.com/index.html#content Googleは、この対策として ハッシュを#!と記述する方法をガイドしていて パラメータ違いの異なるコンテンツとしてクロールしてくれるようです。 この書式に基づくとcontentというパラメータを扱いたい場合は、こんなURLになります。 http://example.com/index.html#!content ソーシャルメディアごとのハッシュ判別状況 http://example.com/ というURLを例に Facebook、Twitter、Google+、はてなブックマークのボタンジェネレータで ハッシュによる差異を別のURLとして認識してもらえるか検証したところ 差別化できる構成はこうなりました。 http://example find out this here.com/#!/content Googleのクローラ対策と併せると 「#!/」以降へパラメータとなる文字列を続けるようにすれば、ソーシャルボタンにも対応できます。 検証に使用した公式ジェネレータはこちら。 Like Button Twitter buttons +1 ボタン はてなブックマークボタン http://example.com/#!content 「#!」以降にパラメータをつけるだけでは、ツイッターで同一URL扱いとなってしまいました。 Facebook Twitter Google+ はてなブックマーク ○ × ○ ○ http://example.com/#!/content 「#!/」というふうに、ハッシュタグのなかにスラッシュも含めると ツイッターでも差異を識別してくれました。 Facebook Twitter Google+ はてなブックマーク ○ ○ ○ ○

webdev

「seo」の記事一覧

WordPressテーマtwentyfifteenで構造化データhatomのauthor不足エラー

自分のサイトのGoogle Analyticsのトラッキングコードをよそで貼られてしまったときの対処法

Google Analyticsに覚えのないアクセスがあったとき調べたこと

Ajaxのページ内遷移とソーシャルボタン