ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

Google推奨のAMPを勉強する際に見るべき・知っておくべきサイト一覧

2018年6月24日
logo_amp

Googleが推奨するAMP(Accelerated Mobile Pages)プロジェクトをWordPress(当ブログ)で実装練習しているのですが、『このサイトは最初から知っておいた方が良いなー』と思ったサイト一覧を簡単にまとめてみました!

AMPは表示速度がかなり早いことや、検索結果としてリッチリザルトを表示できることからユーザビリティ向上にも役立つので、SEOにも影響することは間違いないと思っていいでしょう。

これからAMPを勉強する人の参考にでもなれば幸いです!

AMPの公式サイト

ampofficial

https://www.ampproject.org/ja/

「AMPについて」やチュートリアルなど、AMPを構築する為に必要な情報が全て記載されています。AMPとは何か?から知りたい方はぜひ読んでみてください。

スポンサードサーチ

AMP by Example

amobyex

https://ampbyexample.com/

主にAMPのコンポーネント集が掲載されているサイト。
amp-accordionやamp-carouselなど、AMP独自の仕様で作成されたコンポーネントのサンプルが紹介されています。
AMP構築の際に役立つのでぜひ活用したい!

AMP Start

ampstart

https://www.ampstart.com/templates

AMPで構築されたサンプルページがたくさんあるテンプレートサイトです。何ならこのテンプレートを使ってAMP対応サイトを作るのもありかも…

スポンサードサーチ

AMP テスト

amptest

https://search.google.com/test/amp?hl=ja

作成したAMPページがレギュレーション通りに作成されているかをチェックするツール。AMPは実装できた!と思っていてもこのテストツールでチェックすると意外とエラーが出ていたりするもの。。AMPページを作成、変更した際には必ずチェックするようにしましょう!

リッチリザルトテスト

amprich-results

https://search.google.com/test/rich-results?hl=ja

リッチリザルト対応したページが問題ないかチェックしてくれるツールです。
ちなみに、リッチリザルトとは検索結果として通常表示されるテキストリンクよりも高度な機能をもつ検索結果のこと(カルーセル表示、画像表示など)です。

例えば、『ラーメン 作り方』で検索した際に、
検索結果にテキストリンク以外に、サムネイル画像も表示されるようなものがリッチリザルトの一例としてあります。

amp_ramen

まとめ

AMPを勉強する初期の段階で上記のサイトを活用することで、よりスムーズに理解が進むのではないかと思います!

関連記事

  • 【AMP】「logo」フィールドの値は必須です。「image」フィールドの値は必須です。構造化テストツールエラーの解決法2018年5月11日 【AMP】「logo」フィールドの値は必須です。「image」フィールドの値は必須です。構造化テストツールエラーの解決法
  • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日 コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法
  • 超簡単!jsでカウントダウンタイマー(残り〜日)を設置する方法2019年1月30日 超簡単!jsでカウントダウンタイマー(残り〜日)を設置する方法
  • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法
  • 【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日 【css】文字(テキスト)にborderをつけるように縁取りをする方法

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.