blog

「https化」と「 Better Ads 標準」 ~はてなブログ~

スポンサーリンク

 更新日2020/04/29

f:id:monteverde-aroma:20190603223518p:plain

はてなブログは初心者でも使いやすいと思いますが、ときどき難しく感じることもあります。今回は、 保護された通信」になるまでの格闘のようすと「Better Ads 標準」についてまとめてみました。を、忘却禄も兼ねて残します。

HTTPS化

f:id:monteverde-aroma:20180616102344j:plain

2019年に、https化 保護された通信」へ切り替えました。  

HTTPS化の前に 

まず、テストブログ(記事数1でもOK)を作り、で実験してみて、問題がなければメインのブログをHTTPS化することにしました。その手順は以下です。

  1. CSSや記事上記事下、サイドバーなどカスタマイズした箇所の画像やJavascriptソースをhttpsにする
  2. [HTTPS]を有効にする
  3. Upgrade Insecure Requestsのメタタグをheadに入れる
  4. Mixed Contentが発生していないか確認する

以下、詳しくみていきます。

1. 個別にhttpsと換える

初心者のくせに、いろいろカスタマイズなんぞしてしまいましたので、まず、はてなブログの[ ダッシュボード]の中の[ 設定]と[ デザイン]を変更します。

  •  設定]>[詳細設定]>[headに要素を追加]
  •  デザイン]>[カスタマイズ]>[ヘッダ]>[タイトル下]
  •  デザイン]>[カスタマイズ]>[記事]>[記事上&記事下]
  •  デザイン]>[カスタマイズ]>[デザインCSS]

修正の方法は、アドレスの頭を「http://」→「https://」にします。サイドバーなどもカスタマイズしている方は、そちらも確認が必要だと思います。

2. HTTPSを有効にする

次に、はてなブログの管理画面からHTTPSを有効にします。

方法は、[ 設定]>[詳細設定]>「HTTPS配信」 

=変更は取り消せません!=

f:id:monteverde-aroma:20180616072459p:plain

変更しようとすると、このような 警告がでます。ちょっとドキドキしながら「OK」をクリックすると、あっけないほど簡単に変更することができました。

3. metaタグをheadに入れる

次に、Upgrade Insecure Requestsというmetaタグを入れました。

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 

 (Internet ExploreやMicrosoft Edgeは未対応だそうです)

metaタグを入れる場所は、

  •  設定]>[詳細設定]>[headに要素を追加]

これで、閲覧者のブラウザに対して、http://へのリクエストを機械的にhttps://へ置き換えるように指示できるそうです。

4. Mixed Contentの修正

最後に、Mixed Content(混在コンテンツ)が発生していないかどうか調べてみます。

Mixed Contentとは、httpsで配信されている記事の中に「http配信」が存在している状態です。(もともとhttp配信しかないサイトをリンクしている場合はそのままでOKです)httpsで配信されているサイトを、自分のブログでhttpと張り付けている場合は修正が必要です。

Mixed Contentの確認方法

Mixed Contentの確認方法 (Chromeの場合) です。

  1. 自分のブログの任意ページを表示して[右クリック]→[検証]
  2. 画面右に表示される[Console]でエラーが出ていたら修正が必要です。

参考サイト:はてなブログ ヘルプ

私は「見たまま」で編集しているのですが、過去の記事を一つひとつ「HTML編集」にして、http://で始まっているものは、https:// に変えました。

記事数が多かったので、この作業が一番大変でした。

エラー(私の場合)

Mixed Contentのエラー(赤)は消えたのですが、安心したのもつかの間、次に以下のようなエラー(赤)が出ていました(泣)。

<Refused to apply style from [fontawesome] because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled"> 

(直訳)

[fontawesome]のスタイルを適用することが拒否されました。なぜなら、MIMEタイプ('text/html') は有効なstylesheetのMIMEタイプではありませんし、厳密なMIMEのチェック機能が適応されています。

 

検索しましたが、こんなエラーは見つかりませんでした。MINEタイプ? stylesheet? 

ここは、知っている単語からアプローチすべし!

[fontawesome]は、Webアイコンを入れた時に使ったものだと気づきました。

なので、もう一度 [fontawesome] を取得し直し、以下をheadタグ内に貼り直しました。

 

<head>
<!-- FontAwesomeの読み込み -->
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
</head>

 

貼った場所は、 

  •  設定]>[詳細設定]>[headに要素を追加]

お世話になったのは、サルワカさんのブログです 

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう 

結果 

これですべてのエラーが消えました。すっきり。

f:id:monteverde-aroma:20180617073446p:plain

無事HTTPS化成功

f:id:monteverde-aroma:20180616071441p:plain

無事、「保護された通信」になりました。

一番大変だったのは、記事をHTML編集から、アップロードした画像やサイトを一つひとつ確認して、エラーを消していったことです。

一括に変換できるツールも紹介されていましたが、私は使いこなす自信がなく、誤字脱字などを直しながら修正しました。100記事あったので、結構大変でしたが、却っていろいろ直せて良かったです。

不具合の対策

さらに、不具合が出たときの対応策はこちらをご覧ください 

HTTPSで配信する - はてなブログ ヘルプ

 

Better Ads 標準

こちらからは、「グーグルアドセンス」を導入されている方を対象にしています。 「はてなブログ・無料版」を利用されていてアドセンスの申請をされていない方は問題はありません。

-Google AdSenseからの連絡

以下のようなメッセージがきました。

Better Ads 標準のグローバルでのサポートについて。7 月 9 日より、Better Ads 標準は全世界の Google Chrome でサポートされます。広告が Better Ads 標準に準拠していないと、Chrome ブラウザでフィルタされる可能性があります。

またまたチンプンカンプンな事柄です。でも「Chrome ブラウザでフィルタ」の部分に危険な香りがします。なので、いろいろ調べてみました。

f:id:monteverde-aroma:20190524010058p:plain

-Better Ads 標準に準拠とは?

Better Ads 標準(Standards) とは、Coalition for Better Adsという団体が定めているサイトの読者が不快に思うような広告を審査・管理するものです。

標準についてはこちら⇒ → Better Ads Standards(英語)

つまり、2019年7月9日以降、Google が広告に関する問題を審査する際は、Better Ads 標準  の解釈に基づいて判断され、。読者によるサイトの閲覧を大きく阻害する広告はChromeブラウザによってブロック(フィルタ)されるという事です。

私の場合、Googleからの検索で見て頂いている割合が、60%ほどあるので気になります。なので、なんらかの対策が必要なのかしら?

閲覧を阻害する広告

閲覧を阻害する広告とは、以下のようなものです。

  • ポップアップ広告
  • 音声付き自動再生動画広告
  • カウントダウン付きプレスティシャル広告
  • 大型追尾広告
  • 占有率が30%以上の広告(モバイル)

f:id:monteverde-aroma:20190517143514p:plain

自分の記事をスマホで見てみると、アドセンスで配信されていたり、手動で追加した広告部分が30%を超えている!アドセンスだけだと問題はない様な気がしますが、手動で「モバイルでスクリーンの30%以上の広告」を設置している場合、広告を見直す必要があるようです。

確認方法

自身のサイトがBetter Ads 標準に準拠しているかどうか確認するには、Google Search Console の「Web Tools」を使います。

  1. 「Web Tools」にログイン
  2. 「広告に関する問題レポート」をクリック
  3. 「確認済のプロパティを選択」で登録しているサイトを選択

すると、現在のステータスが確認できます。私のステータスは・・・

ステータス: 未審査 

と出ました。どうしようかと思ったところ、以下を見つけました。

サイトの審査ステータスが [不合格] であり、記載の日付から広告フィルタが開始されます。広告フィルタを開始する 30 日前までに、登録されているサイト所有者とユーザーに Google からメールが届きます。広告フィルタが適用されないようにするには、違反内容を修正してサイトの再審査を受ける必要があります。

ステータスの審査は、申し込みすることもできないので傍観あるのみで、審査がいつ行われるのかも不明です。でも、何らかの問題があったときは、メールで知らせてくれるようです。

-対応策

今のところ、対応策は以下の2つのようです。

  • Google Search Consoleでステータス確認:もし「不合格」となってしまったら(メールを受け取ったら)30 日以内に修正する。
  • (念のため)9日なったら、広告がブロックされていないかどうか、スマホとPC両方の画面で確認する

でも、「画面を防ぐような広告がなくなる」など読者の方にとっては良いこともあるようです。もし「不合格」となったらちょっと焦りますが、自分では気づいていない不快感を除くことができると考えればいいかもしれません。記事は快適に読んでいただきたいですものね。 

 

【追記】

2カ月経ちましたが、とくに不具合はないようです。良かったです(^^) 

 

同じように「不安」な方のお役に立てれば幸いです。最後までご覧いただきありがとうございます。

 

 

 

  • この記事を書いた人

momoka

ご覧いただきありがとうございます。客室乗務員→大学院生→キルギス・途上国ボランティア。キルギスで出会ったアロマに魅せられ、帰国後はアロマインストラクターになりました。アロマを探して世界中を旅しています。どうぞよろしくお願いします(^^)

-blog

© 2020 旅とアロマ Powered by AFFINGER5