Web制作

Microsoft Edge読み取りビューでサイト収益を下げない為に

Windows10のMicrosoft Edgeに触れる

ホームページ管理において、ウェブブラウザの種類ごとに変わってしまわないか、デザインの整合性を見るのは重要なことです。Windows10にインストールされているMicrosoft Edgeというブラウザも同様に接する必要があります。それでは件のMicrosoft Edgeについて見ていきましょう。

[adssp]

Microsoft Edgeとは

Microsoft Edgeは、これ一つで読み書きとウェブはおろか、データ検索までもが行えるという触れ込みのブラウザで、Internet Explorer(以下IE)と違う最大の特徴です。これから先展開されていくであろうWindows10搭載デバイス間との連携も可能になるようです。Microsoft Edgeは、IEとは別物のブラウザです。Windows10のプログラム中を探せば、IEはきちんと存在していますし動作もします。また試しにMicrosoft Edgeを使ってみたいという方は、お気に入りのインポートがサポートされているのでお試し下さい。

オールインワンに秘められた大人の事情

ネット閲覧に使用される端末が、PCからスマートフォンに移り変わっているこのタイミングでこのようなブラウザが登場したのには、どうにかシェアを繋ぎとめようとしているMicrosoft苦肉の策なのではないかと勘ぐってしまいます。

「読み取りビュー」の使用感

Microsoft Edgeの機能の一つに、「読み取りビュー」というものがあります。これがアクティブになると、閲覧しているWebページのメインコンテンツと画像だけが表示されて、不必要な広告などは非表示になります。活字のみの文章が羅列してしまうので、視覚的に楽しむ事は出来ませんが、読み取りビューに対応しているニュースサイトの記事を読む際には役立つことでしょう。課題はサイト側が対応しているかですが、いかなる機能も開いたページが未対応なのでは意味がありません。そこで今回はどうすれば読み取りビューに対応したページが作成できるかを考えていきます。

メインコンテンツ(本文)がキャプチャされる条件

ページのすべての本文テキストが読み取りビューにキャプチャされるようにするには、記事のテキストのほとんどで、同じフォント サイズと DOM 深度を保つようにしてください。読み取りビューのアルゴリズムでは、このルールからの逸脱が、ある程度は許容されるため、発行者は、行や単語に強調を追加することができます。

これを要約すると…

  • テキストは同じフォントサイズで統一すること
  • Javascriptを扱う場合DOMツリーは同じ階層にすること
  • 強調文字による多少の変化は認める

こうなります。

この場合、CSSによる整形はどういう判定になるのかが気になるところです。ブロックレベル要素を用いた当ブログで対応されていなければ、記事はよりシンプルにしなければならない事が分かります。さすがにそこまで判定が厳しければ、機能そのものが廃れかねませんね。

画像がキャプチャされる条件

読み取りビューは、幅が 400 ピクセル以上、縦横比が 1/3 以上、3.0 以下のほとんどの RAW 画像をキャプチャします。幅が 400 ピクセル未満で字幕付きの画像など、これらのサイズに一致しない画像も抽出される場合があります。対象となる最初の画像が、その記事の優先画像になります。優先画像は、コンテンツの最初の部分として、列の幅全体にわたって表示されます。その後のすべての画像は、記事内にインライン画像として表示されます。

ということで、要約しますと…

  • 横幅400px以上かつ正方形ないし横長の画像
  • 条件一致した最初の画像がインライン要素としてキャプチャされる

といったところでしょうか。

読み取りビューを不許可にする方法

広告が非表示になるとサイトの収益に関わるから、許可したくないという管理者もいることでしょう。その場合はMETAタグを使い以下のように記述します。

<head>内に記述して下さい。



下記リンクより抜粋

読み取りビュー
https://msdn.microsoft.com/ja-jp/library/mt203633(v=vs.85).aspx

The following two tabs change content below.
Akky
会社員有限会社 宮坂整骨院
横浜で整体を生業としています。当ブログは、趣味/仕事/商品紹介/気になったことを記事にしていきます。共感するところが少しでもあれば、SNSでアクションを起こしていただけると嬉しいです。

Adsense336

-Web制作

© 2021 タブカン Powered by AFFINGER5