Chrome 69がオムニボックスのwwwをデフォルト表示に戻す。しかし10月リリースの70では再び非表示に
[レベル: 上級] Chrome 69 のオムニボックス（アドレスバー）では、サブドメインの www や m が表示されなくなりました。 しかしマイナーアップデートによって再び表示するように Google は仕様を変更しました。 ですが、次のバージョンの 70 では再度、非表示にするとのことです。 Chrome 69 で www を非表示 ⇒ 再び表示 Chrome 69 のオムニボックスでは、https のスキームと www サブドメインおよび m サブドメインを URL から非表示にするように仕様が変わりました。 Chrome の chrome://flags/#omnibox-ui-hide-steady-state-url-scheme-and-subdomains フラグを Disabled に変更することで以前のように表示させることができます。 しかしその後リリースされた v6
iOS版Safariにホーム画面アイコンを簡単に追加できるPWACompat
[レベル: 上級] PWAをサポートしていないブラウザでもホーム画面アイコンを追加できる仕組みとして、PWACompat を Google は公開しました。 PWACompat を構成すると、Web App Manifest を解釈しないブラウザために、関連する meta タグや link 要素を自動的に挿入してくれます。 PWACompat で iOS 版 Safari にもホーム画面アイコンを追加 iOS 版 Safari は Service Worker のサポートに着手しましたが、完成にはまだほど遠い状態です。 たとえば、Web App Manifest（マニフェスト ファイル）によるホーム画面アイコン追加の機能をまだサポートできていません。 iOS にホーム画面アイコンを追加させようとしたら、link rel="apple-touch-icon" のようなタグを別途追加する必要が
WordPressをPWA対応させる公式プラグインがリリース（が、まだ使える状態ではない）
[レベル: 上級] WordPress サイトを PWA 対応させるプラグインがプラグインディレクトリに公開されました。 このプラグインは、WordPress の VIP パートナーである XWP が中心となって開発し、加えて WordPress 本体の開発元である Automattic とさらには PWA 発展の旗振り役でもある Google が関わっています。 WordPress を PWA 化するプラグインはすでにたくさん公開されていますが、3社がタッグを組んでいるという点でこのプラグインはPWA対応のための公式プラグインと言ってもいいのではないでしょうか。 Service Worker, Web App Manifest, HTTPS PWA対応の公式プラグインと聞くとワクワクしますが、できることは非常に限られています。 現状では次の機能をサポートできています。 Service W
Google PageSpeed Insightsのoriginコマンドでサイト全体のスピードを計測
[レベル: 中級] ウェブページの表示スピードを計測するツールの PageSpeed Insights で、サイト全体を集計した速度データを調べられるようになりました。 これまでは、単一のページが検証の対象でした。 origin: コマンドで集計データをレポート サイト全体の速度データを集計してレポートを出すには origin: をドメイン名の URL の先頭に付けます。 僕のサイトであれば、origin:https://www.suzukikenichi.com で検証します。 僕のサイトは、全体としては「Fast」（速い）という結果が出ました。😃 あるいは、個別ページを検証すると、origin: コマンドを使うと集計データをレポートすることができるという説明が出てきます。 Chrome ユーザー エクスペリエンス レポートでは、このorigin（https://www.example
リッチスニペットからリッチ検索結果（リッチリザルト）へ。構造化データの新しい検証ツールをGoogleが公開
[レベル: 上級] リッチスニペットにも使われる構造化データを検証するための新しいツールを Google は公開しました。 Introducing Rich Results & the Rich Results Testing Tool 名称を「リッチリザルト」に統一 構造化データを利用した検索結果の特別な表示形式の種類として、Google は複数の用語を用いていました。 リッチスニペット (rich snippets) リッチカード (rich cards) エンリッチ検索結果 (enriched results) 公式ドキュメントにおいては今後は、「リッチリザルト (rich results)」に名称を統一します。 【UPDATE】 この記事を公開した時点では日本語訳として「リッチ検索結果」が当てられていましたが、ほどなくして「リッチリザルト」に変更されました。 リッチリザルト テスト
Googleマイビジネスの投稿タイプに「製品」が追加。検索結果からの販売が可能に
[レベル: 中級] Google マイビジネスで、商品を販売するための投稿を作成できるようになったようです。 「Google に投稿」機能のタイプに「製品」が追加か？ Google マイビジネスには「投稿」機能があります。 作成した投稿は、Google 検索や Google マップに表示されるビジネスリスティングに表示されます。 Google Posts とも呼ばれるこの機能は、2017年6月に導入されました。 次の3タイプの投稿を作成できます。 最新情報 (What’s New) イベント (Event) クーポン (Offer) これら3つに “Product”（日本語では「商品」または「製品」か？）が新たに加わるようです。 Product の投稿が可能になったユーザーがスクリーンショットを Twitter で共有しています。 New: GMB Product Posts – This
PWA版GoogleマップがGoogle Playからインストール可能に、PWA対応したGoogle検索は高速化に成功 #io18 #io18jp
[レベル: 中級] Google は PWA の発展、普及に力を入れていますが、自社プロダクトの PWA 化にも乗り出しています。 この記事では、PWA 対応した Google マップと Google 検索について紹介します。 PWA 版 Google マップの Google Maps Go は Google Play からインストール可能 PWA に対応した Google マップは今年の2月に正式にリリースされていました。 その後 PWA 版 Google マップは「Google Maps Go」という名称で、Google Play にアプリとして掲載されるまでに至りました。 「Google Maps Go は、Google マップ アプリの軽量版のプログレッシブ ウェブアプリで」と説明に書かれています。 「プログレッシブ ウェブアプリ」が何なのかを一般ユーザーが理解できるかどうかはとも
レンダリング検証とJavaScriptコンソールの機能がモバイルフレンドリーテストとリッチリザルトテストに追加
[レベル: 上級] モバイル フレンドリー テスト ツールとリッチリザルト テスト ツールで、レンダリング後のソースコードと読み込めなかったリソース、JavaScript のエラーを取得できるようになりました。 モバイル フレンドリー テストとリッチリザルト テストがレンダリング検証ツールに早変わり 下のキャプチャはモバイル フレンドリー テスト ツールの実行結果です。 左に「ページの読み込みに関する問題」、右に「ソースコード」があります。 「ソースコード」を選択すると、Googlebot がレンダリングした後の HTML のコードを確認できます。 初期状態の素のコードではなく、DOM を解釈した後のコードというのがポイントです。 たとえば JavaScript で DOM を操作しているページで Googlebot が正しく実行できているかどうかをソースコードレベルで検証可能です。 「ペ
Lazy Load画像をSEO対応させる2つの方法――noscriptと構造化データ #io18 #io18jp
[レベル: 上級] Lazy Load で読み込ませる画像を SEO に対応させる、言い換えれば、検索エンジンにインデックスさせるための方法として、次の2つを Google の John Mueller（ジョン・ミューラー）氏は Google I/O 2018 のセッションで推奨しました。 <noscript> タグ 構造化データ Lazy Load 画像は SEO に不向き Lazy Load で読み込ませる画像が SEO に不向きな理由は以前にも説明したことがありますが、もう一度簡単におさらいしておきます。 そんなの知ってるよという方はここは読み飛ばして構いません。 Lazy Load（レイジー ロード）とは、遅延読み込みのことです。 画像の表示によく使われます。 ページを表示した段階では画像を読み込ません。 スクロールして、ユーザーの見えるエリアに画像（が表示されるべき場所）が入った
ローカルビジネス運営者はGoogleマイビジネスでカバー写真を必ず追加する
[レベル: 初級] Google マイビジネスで設定されたカバー写真は、ナレッジパネルや Google マップで優先的に表示されやすくなります。 【重要】Google マイビジネスでカバー写真を設定する ビジネスリスティングに表示する写真を Google マイビジネスで追加する方法を説明しているヘルプ記事を更新したことを Google マイビジネスの Twitter 公式アカウントがアナウンスしました。 Photos are an important piece of the user experience and help represent your business on Google Search and Maps. Check out updates we've made to our Local Photos article in the Google My Business
転職サイトで求人一覧ページにJobPosting構造化データをマークアップできるのか？
[レベル: 上級] 米 Google (google.com) で導入された Google for Jobs に掲載されるには、基本的に schema.org/JobPosting の構造化データでマークアップする必要があります。 JobPosting のマークアップの設定方法についてよくある質問とその回答を先週紹介しました。 Google の Mariya Moeva（マリヤ・モエヴァ）氏が公式ヘルプフォーラムで共有したものです。 求人情報の一覧が載っているリストページでのマークアップが可能かどうかという問いに対して、モエヴァ氏は次のように説明していました。 Yes, you can include markup on a listing page, as long as all individual jobs on that page are marked up with JobPos
仮称「Google Posts」がGoogleマイビジネスの「投稿」機能として正式公開
[レベル: 中級] “Google Posts” と呼んで、このブログで紹介していた機能が正式に公開されました。 Google マイビジネスの新機能として、すべてのローカルビジネスオーナーが利用できるようになっています。 ヘルプ記事ができあがっていたので間もだろうと予想していたところ、その通りになりました。 Google Small Business ブログで公式アナウンスが出ており、日本語版の AdWords 公式ブログでは翻訳記事を読むことができます。 Google に「投稿」 Google Posts と勝手に呼んでいましたが、特別な名称は付けられていません。 単純に「投稿」という名前の機能で提供されています。 Google マイビジネスのダッシュボードまたはモバイルアプリ(Android & iOS) で投稿できます。 こちらは、Google マイビジネスに PC からアクセスした
AMPがフォームをサポート、amp-formの実装でメールアドレス登録やECサイトのカラー選択などが可能に
[レベル: 上級] AMPが正式にフォームをサポートしました。 <form> 要素と <input> 要素を使用したフォーム機能がAMPページでも利用できます。 フォームを利用するとたとえば、メールアドレス登録やサイト内検索、ECサイトでのカラー選択などユーザーからのアクションに応じた操作が可能になります。 amp-formでフォームを実装 AMPページでフォームを実装するためには、<amp-form> 拡張を使います。 コードの例です。 <form method="post" action-xhr="https://example.com/subscribe" target="_blank"> <fieldset> <label> <span>Your name</span> <input type="text" name="name" required> </label> <label
AMPのバリデーションや構造化データ、キャッシュなどを一括でチェックできるツール――AMPBench
[レベル: 上級] AMP化したモバイル検索の導入が日本でも迫っています。 AMP対応を進めているサイト管理者も多いのではないでしょうか。 AMP対応する際に役立つツールとして、AMPページの有効性を検証するための「AMP テスト ツール」をGoogleは先週公開しました。 この記事では、公式ツールではない、AMPページのさまざまな情報をチェックできるサードパーティ製のツール、「AMPBench（アンプベンチ）」を紹介します。 さらに多くの情報をチェックするAMPBench AMPBenchは、公式のAMPテストツールよりもさらにずっと多くの情報をチェックしてくれます。 AMP HTMLの有効性 amphtmlリンクタグおよびcanonicalの有無 Googlebotがクロール可能か AMP CDNにキャッシュされているか 構造化データが設定されいてるか etc. リストに挙げたのは一部
Google、AMPをサポートするモバイル検索を正式公開。ゆっくりと展開し、まずは米国から導入開始か？
[レベル: 中級] Googleは、Accelerated Mobile Pages (AMP) を通常の検索でサポートするモバイル検索を正式に公開しました。 Inside SearchブログとAMP公式ブログで同時にアナウンスしています。 すべてのモバイル検索結果にAMPページを表示 今までは、AMP対応したページは、ニュース的なコンテンツだけが通常の検索結果とは別にトップニュース枠に（主に）カルーセル形式で掲載されていました。 通常の検索結果にもAMP表示を拡大したモバイル検索をGoogleは8月に試験的に公開していましたが、いよいよ正式導入です。 今後は、すべての検索結果にAMPページが表示されることになります。 リッチスニペットを設定したレシピページもAMP対応していれば、AMP版が表示されます。 ランキングアルゴリズムの変更ではない 試験公開されていた開発版のときと同じように、ラ
Accelerated Mobile Pages (AMP) の始め方をGoogleがブログで紹介 #AMPlify
[レベル: 中級] Accelerated Mobile Pages (AMP) に対応したサイトを増やすことを目的としたAMPlifyキャンペーンをGoogleは先日スタートしました。 キャンペーンの第一弾として、AMPの始め方を紹介する記事を、英語版と日本語版のウェブマスター向け公式ブログで同時に公開しました。 How to get started with Accelerated Mobile Pages Accelerated Mobile Pages を始めるには 英語版と日本語版のほか、ドイツ語版やフランス語版の公式ブログでも翻訳記事をすぐさま公開しているあたりにも、AMP普及に対するGoogleの気合の入れようを感じます。 AMP対応を始めるに必要なリソースの紹介 書いてある内容は、AMPを始めるために必要なリソースの簡単な紹介です。 CMSはプラグイン利用 次のCMSはプラ
Google、AMP化を勧めるキャンペーンを開始。今すぐAMP対応すべきか、それともまだ待つべきか？
AMPをサポートする通常検索を年内にリリース 特に新しい内容は記事には含まれていません。 簡潔にまとめれば、次のように説明し、 速く表示されるページをモバイルユーザーは求めています。 AMPはそうした要望をかなえられる仕組みだから、AMP対応しましょう。 関連コンテンツへリンクしているだけです。 気にかけるとしたら、次の一文でしょうか。 Later this year, all types of sites that create AMP pages will have expanded exposure across the entire Google Mobile Search results page, like e-commerce, entertainment, travel, recipe sites and many more. ECサイトからエンタメ系、旅行、レシピに至るま
Google CDNのAMPキャッシュを大解剖――URLフォーマット、更新プロセス、更新方法、削除方法
[レベル: 上級] この記事では、Googleが公開しているドキュメントに基づいて、AMPキャッシュの仕組みについて説明します。 具体的には、次を扱います。 AMPキャッシュのURLフォーマット AMPキャッシュの更新プロセス AMPキャッシュの更新強制 AMPキャッシュの削除 あなたがAMPをすでに実装しているなら、知っておくと役に立つこともあるはずです。 では行ってみましょう⚡ AMPキャッシュのURLフォーマット AMP CDNにキャッシュされたコンテンツはたとえば次のようなURLになります。 https://cdn.ampproject.org/c/s/example.com/amp_document.html https://cdn.amproject.org/i/example.com/images/logo.png 分解して、どんな構成になっているのかを見てみましょう。 ※こ
AMPに構造化データはもはや不要、Search Consoleのエラーレポートからも外れる
[レベル: 上級] Googleのモバイル検索結果にAMPページが表示されるには、有効なAMP HTMLでのマークアップに加えて、schema.orgを用いた構造化データが必須でした。 しかし、今後は必須でなくなります。 通常の検索結果にもAMPページを将来的に表示することを視野に入れた変更です。 またこの変更にあわせて、Search ConsoleのAMPレポートでは構造化データ関連の問題はエラーの対象から外れました。 これまでは、AMPコンテンツを検索結果に表示させるには次のいずれかのschema.orgによる構造化データが必要でした。 schema.org/Article schema.org/NewsArticle schema.org/BlogPosting schema.org/VideoObject 要件指定された構造化データでマークアップすることが、トップニュース枠のAMP
AMPカルーセルの画像サイズは幅が696px以上、縦は最小要件なし
[レベル: 上級] Googleモバイル検索のトップニュースのAMPカルーセルに掲載されるにはその記事に画像が必須で、構造化データで指定します。 画像のサイズには要件があり、幅 (width) は 696px 以上です。 しかし高さ (height) には、最小サイズの要件はありません。 公式ドキュメントには高さの要件記載なし トップニュースのカルーセルに必要な構造化データを説明した、Google公式のドキュメントには画像のサイズ要件が示されています。 Images should be at least 696 pixels wide. 画像の幅は最小で696ピクセルです。 ところが、幅の要件の記載はあるのですが、高さの要件の記載がありません。 高さ対しては要件は指定されていないのでしょうか？ 高さの最小要件は定められていない 「高さは何でもいいのか？」という疑問に対して、GoogleのT
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
