ラベル 検索エンジン の投稿を表示しています。 すべての投稿を表示
ラベル 検索エンジン の投稿を表示しています。 すべての投稿を表示

2016年1月27日水曜日

GoogleのAMP（Accelerated Mobile Pages）ってすごいの？

  
AMP（Accelerated Mobile Pages）とは・・・


Z-MENです。
どうも。

昨年夏頃？からモバイルやSEO界隈でAMPの話題がすごく盛り上がっていて、
モバイル担当としてもやはり気になるところなので一度情報を整理してみたいと思います。

自分の勉強がてらではありますが、どなたかの参考になれば幸いです。
AMPとは、からAMPの実装・確認までまとめてみます。

AMP（Accelerated Mobile Pages）とは？

AMPはAccelerated Mobile Pagesの略称です。
GoogleとTwitterが共同で立ち上げたAMPプロジェクトのオープンソースらしいです。
簡単に言うとAMPに対応した記事コンテンツをGoogle側が勝手に読み取り、キャッシュして、
超高速に優先表示してくれます。モバイルの場合のみ出てくるようですが、カルーセル形式でずらっと並べてくれます。

去年末くらいからモバイルで検索した際に、一部記事がカルーセルで表示されるようになりましたが、あんな感じのイメージで、表示が超高速になる、という感じです。

【g.co/ampdemo】でAMPをデモ体験

Googleさん、ちゃんとデモも用意してくれていて、Googleの検索窓に『gco/ampdemo』といれると
AMPのデモ表示モードに切り替わります。ほんと爆速です。


 AMPの実装について

AMPの実装方法を見てみましょう。
GitHubにもあるんですが、全部英語でオエッとなるかたは参考になれば。

AMPは専用のjsライブラリとbilerplate（いけてるテンプレみたいの）で動くとのこと。
超シンプルに書くとこんな感じになりますと。 

  
    Hello, AMPs
    
    
    
    
    
  
  
    

Welcome to the mobile web


　

マークアップ上の注意点としては、

    • <html>タグを<html amp>と書く？
    • <head> 内に<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>をいれる
    • <head>閉じ直前にを<script async src="https://cdn.ampproject.org/v0.js"></script>をいれる
    • 画像を入れるときはこんな感じ<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
    とかとか、基本はこんな感じなのですが、普通にHTMLでページ作ればOKというわけでもなさそうです。
    公式のGetStartにいくつか注意事項があるので貼っておきます。
    AMPプロジェクト公式
    AMP GitHub

    日本語版の導入ガイドも発表されたようです。
    AMP日本語版導入ガイド

     AMPの条件・制約 

    AMPには、爆速を得られる代わりにいくつか制約があります。
    この制約がやや影響が大きく、導入できない方も多いかもしれません。

    1. AMPのランタイムはAMPのCDNから固定のURLで配信
    2. Javascriptが使えない（JSON-LDのみ）
    3. 画像・動画は大きさの固定指定が必要
    4. 広告はiframe経由で表示
    5. フォーマットを遵守
    6.  link要素はrel：canonical以外禁止
    7. ほかimgとかformとかinputタグも使えないかも
    とのこと。これ特に②がでかい、トラッキングができない・・・。
    『AMP実装したから効果が楽しみだぜー！』と思っても効果の程がわからない・・・
    そしてどうもレスポンシブにもうまく対応してない模様。。。厳密にはレスポンシブの実装方法による、ということででしょうか。ちゃんとCSSとかでdevicewidthで判別してればいいんでしょうが、jsでUserAgentみて～とかやってるとアウトなんでしょうね。
    レスポンシブを推奨しておきながらレスポンシブでは使えないかもってどうなのよ。
    そしてとどめの⑥⑦・・・まじか。
    とにかく新しいものやっとけ！と飛びつかずにGoogleが修正やら本腰入れた公表をするまでは
    いったんステイが間違いないかも、が現時点でのわたしの見解です。


    2016.02.03追記
     広告とGAについては対応されることが発表されたようですね。
     まずは最低限の機能は揃えてくれた、というかんじでしょうか。他のアクセス解析が
     使えないのは相変わらず痛いんですが・・・。
    AMPが広告とGoogleアナリティクスをサポート開始

     AMPの確認方法

    先日SearchConsoleでAMPが確認できるようになりました、とアナウンスがありました。
    とりあえず実装してみた！というかたは覗いてみましょう。
    公開しなきゃわからんよ、ってことね・・・。
    Googleウェブマスターブログ：Search Console における AMP エラー レポートのプレビュー 

     終わりに

    GoogleのAMPの説明を直接聞いたり様々な記事に目を通したりしてきましたが、所感として、モバイルフレンドリーの基準として表示スピードがいよいよ本格導入されるか？な話もあり、AMPを通してモバイルでの表示スピードに対するGoogleの本気度みたいなものは感じました。





    2015年9月9日水曜日

    クローラビリティとショッピングモール

      
    岡田です。初めての投稿です。 
    さぼってましたが、個人的にSEO関連でメモっておきたいな～と思ったものをまとめていきたいと思います。

     ■クローラー 
    今回のタイトルにもしている「クローラー」。検索エンジンがWEB上にあるファイルを集めるためのプログラムです。 

    クローラーさんがサイトに訪問することによって、そのサイトの内容や画像が検索エンジンに蓄積されて、検索結果に表示されるということですね。

     大きなショッピングモールを歩きながらウィンドウショッピングをしているようなイメージです。
    「２階の西側はティーン向けの洋服屋さんがあるな」とか「３階には映画館があるな」「フードコートは地下か」とか、そんなことを考えながらクローラーさんはウロウロしているのでしょう。

     ■クローラビリティ

     ただ、クローラーさんもウロウロしながらすべてのお店をくまなく見ることはさすがにできないようで、すこしでも気づいてもらえるようにする工夫が、最近はやっている「SEO対策」というわけですね。

     クローラーの巡回しやすさを「クローラビリティ」といい、たくさんの情報があるサイトほど、クローラビリティは重要な要素になるようです。 

    先ほどのショッピングモールの例えで言えば、、「２階東側に新店舗OPEN！」という看板を関連する店舗に立てるとか、そんな感じでしょうか、、あんまりうまくないな。


     そういえば、先日初めて亀有にある某ショッピングモールに行ったのですが、ながーい通路にはたくさんベンチやソファがあって、たくさんの家族連れが休憩できるようになっていました。 
    さらに驚いたのは、そのベンチの一部がマッサージチェアになっていて、「５分１００円」で足と背中をマッサージしてもらえるんです。 
    荷物持ちと子供の世話でくたくたなお父さん方にもウケそうですし、外出が億劫になりがちな高齢者の方にもお買い物を楽しんでもらえるきっかけになりそうだなと思いました。


     そんなわけで次回から、検索ロボットのクローラビリティに関するお話とちょっと日常で気になったこととかをまとめていきます。
    登録: 投稿 (Atom)