PCで遊んだ日々の備忘録

Making PC and Customization PC

ウェブマスター初心者が素人なりにSEOしてみました

管理人がウェブマスターとなったきっかけはパソコンを自作したりメーカー製のパソコンをカスタマイズするのが趣味で、その時のノウハウ的な事やメモなどを書き留めていた大学ノートが3冊になったことです。

この大学ノート3冊分の内容をデータ化してアーカイブし、いつでもどこからでも参照できないものかと考えたのがそもそもの始まりでした。当初はExcel、Wordでと思いましたが同じキーボードを叩くのならばこの際ホームページを自作してみようという思いに至りました。

早速サーバー機を自作しOSのインストールに始まりウェブサーバーの構築、ドメイン名取得、ダイナミックDNSサーバーへの登録を経てホームページ作成の準備が整いました。

このとき初めてHTML(HyperText Markup Language)とCSS(Cascading Style Sheets)の存在を知り、その後これら未知の言語に四苦八苦しながらもホームページを完成させ、しかし完成と呼べるほどの代物ではなかったがなんとか公開までこぎつけました。

曲がりなりにもウェブマスター初心者となったわけです。サーバー機の自作からここまでおよそ8カ月を要しました。

自作のホームページを公開して2年ほど経ったころ今度はSEO(Search Engine Optimization)というものがあることを知りました。これを実施するとGoogle検索に表示される順番が上がりやすくなるそうなので素人なりにSEOしてみました。(2016/09)

参考資料

SEOするといっても右も左も分からないので Googleの検索エンジン最適化スターターガイド に沿って出来る事をやってみました。

Starter guide 1p

検索エンジン最適化スタータガイドの扉の画像

Starter guide 2p

検索エンジン最適化スタータガイド1ページ目の画像

Starter guide 3p

検索エンジン最適化スタータガイド2ページ目の画像

自作サーバー機のコンセプトと仕様

ホームページを機能させるためにはまずウェブサーバーが必要です。自作するホームページは高画質の画像と動画を多用すると決めていました。

そのため使用制限の多いレンタルサーバーは使えず、かつ処理速度(配信速度)を落としたくないのでサーバー機を自作しました。この事が結果的にページの表示時間に良い影響を与えたようです。

サーバー機のハードウェア

BTOパソコンをカスタマイズした自作サーバー機の画像1/2

BTOパソコンをカスタマイズした自作サーバー機の画像2/2

  • 自宅に設置するので静音重視
  • ベースマシンは10年前に購入したBTOパソコンを使用しこれをカスタマイズする
  • 夏場の24時間連続稼働に耐えうること
  • ATX電源ユニットは冷却ファンが負荷可変速対応のものを使用しファンレス化を狙う
  • PCケースの冷却ファン大型化とファン効率の向上
  • CPUクーラー及び冷却ファンの容量アップ
  • CPUは Pentium4 Northwood 3.4GHz
  • 実装メモリーは 4GB
  • HDDは 2.5inch、7,200rpm、容量1TB

で製作しました。ほぼこの内容は達成しており現在までトラブルはありません。

さらに詳しいことは 自宅サーバー ~自作機

サーバー機のセットアップ

サーバー機が完成したら次はLinux OSをインストールしてFTP・SSH・Webの各サーバーを構築し FQDNつまり完全修飾ドメイン名を業者経由で取得しました。自宅はプロバイダとの契約が動的グローバルIPアドレスなので名前解決のためダイナミックDNSへ登録しています。

そして自作したホームページはサーバー側プログラムでもって圧縮してから配信するように設定しています。

その結果は

以上の様なオーバースペックとも思えるハードウェアの仕様や圧縮配信などこれらはウェブラウザ側の表示速度をはやくしたいがために行った事で、これが意図せず結果的にSEOになっているようです。

サーバー性能(サイトの表示速度)とクロールの関係など

Googleウェブマスター向け公式ブログの記事によれば「速度に優れたサイトはサーバーが健全である」とみなしGooglebotのクロールが増え、逆にサイトの表示が遅い場合はサーバーに問題ありと判断されクロールが減るとのことです。

ただし検索結果のランキングにはほとんど影響しないようです。

Googleウェブマスター向け公式ブログ「Googlebotのクロールバジェットとは?

HTML記述の見直し<head></head>

見直した内容

  • HTML5とCSS3でホームページを新作
  • ページのタイトルを適切な名称にする <title>
  • ページの概要を記述する <meta> description
  • キーワードを記述する?しない? <meta> keywords
  • モバイル端末の表示に対応 <meta> viewport
  • HTML5バリデーションエラーの修正 <link> stylesheet
  • まとめ

当初公開していたホームページはテンプレートを使用して見よう見まねの自己流でHTML4.1、文字コードはShift_JIS、そして<table>タグを用いたテーブルレイアウトで作成していました。

正式にHTMLやホームページの作り方を勉強したわけではないのでこれが正しいのかそうでないのかの判断すら出来ていませんでした。

そもそも外出先から見れるように自分と数人の知り合いのためだけに作ったものなのでHTMLの書き方なんぞ気にも留めずページレイアウトが崩れず体裁が整っていれば良い程度にしか思っていませんでした。

HTML5とCSS3でホームページを新作

この状態のまま半年が過ぎたころテーブルレイアウトは使ってはいけない事を知りHTML5とCSS3でコンテンツ内容はそのままに新しいホームページを作成しました。つまり2つのホームページを公開することになった訳です。

文字コードのShift_JISはHTML5のバリデーションチェックで警告になっていたので UTF-8に変更しました。htmlファイルを UTF-8Nで保存し charsetメタタグに UTF-8と記述します。

<head>
<meta charset="UTF-8">
</head>
 
重複コンテンツのURLを正規化 <link>canonical

新しいドメイン名は httpdのネームバーチャルホスト機能を使い、最初に自作したホームページと同時配信するようにしました。新しく自作した方はコンテンツを除いたページレイアウトに画像の使用を最小限にしているせいなのか表示速度が明らかに速いです。

具体的なドメイン名は、最初に自作したのが www.fuukemn.bizで後から自作したのが info.fuukemn.bizです。その後 www.fuukemn.bizもテーブルレイアウトからHTML5+CSS3で作り直しました。

www.fuukemn.bizと info.fuukemn.bizはコンテンツの内容が全く同じ「重複コンテンツ」なのでURLを正規化するため<head>内にcanonicalタグを両ドメインの全てのページに記述しました。

URLを相対パスで指定していたら上手くいきませんでした。絶対パス指定に訂正しました。

トップページ

  • www.fuukemn.biz/ ・・・相対パス
  • http://www.fuukemn.biz/ ・・・絶対パス
<head>
<link rel="canonical" href="http://www.fuukemn.biz/">
</head>
 

自作PC雑感のページ(page1.html)

  • www.fuukemn.biz/page1.html ・・・相対パス
  • http://www.fuukemn.biz/ page1.html・・・絶対パス
<head>
<link rel="canonical" href="http://www.fuukemn.biz/page1.html"> 
</head>
 

ページのタイトルを適切な名称にする <title>

当初<title>に記述するページタイトルは全ページに自サイト名と同じ「PCで遊んだ日々の備忘録」だけを記述していました。知らぬ事とはいえこの状態を2年近く放置していました。

その後 Googleの検索エンジン最適化スターターガイドの存在を知り、それによるとページタイトルはそれぞれ固有のページタイトルを付けるのが理想と書いてありました。そこで例えば

<head>
<title>Ubuntu14.04LTSXfceデスクトップで使う事にしよう|PCで遊んだ日々の備忘録</title> 
</head>

の様に全てのページを固有のタイトル名に変更するのに手間がかかりましたがその分結果は出たようです。試しにGoogleでもyahoo!でもよいですが検索窓に ubuntu xfce と入力すると上記のページタイトルが1ページ目の4段目くらいに表示されるようになりました。

下の画像は2016年9月現在のGoogle検索結果のスクリーンショットです。

 

前出のスターターガイドにはページタイトルを付けるポイントが

  • ページの内容を適切に記述しよう
  • 各ページに固有のタイトルを付けよう
  • 簡潔で説明的なタイトルを付けよう

と記されています。文才に乏しいウェブマスター初心者の管理人にはちと辛い作業でした。

ページの概要を記述する <meta>description

<meta>タグのdescriptionには<title>タグと同じく固有のページ概要を記述するのが理想とスターターガイドにあるのですが、これまた全ページに下記の同じ文言を記述してしまいました。

<head>
<meta name="description" content="自作PCの組立てとメーカー製PCのカスタマイズの記録です。"> 
</head>

これも全てのページを変更したいところなのですが何しろページの概要をコンパクトに記述する作業なので遅々として進まず実行できているのは全体の1/3程度です。

前出の Ubuntu14.04LTSをXfceデスクトップで... のページも変更できておらずページの内容とdescriptionの記述が合っていないのですが検索結果には本文中の文章を抽出して表示されています。

検索エンジン最適化スターターガイドには

各ページにdescriptionメタタグを入れておくと、Googleがスニペットに適当な文章をページの本文中から見つけられなかった場合の良い備えとなります。

とありdescriptionメタタグは補助的なものであり、やはり大切なのはコンテンツの質のようです。

また descriptionを適正に記述したページにおいては検索結果に表示されたりされなかったりで、検索されたキーワードによって変化するようです。

スターターガイドにはdescriptionのポイントとして

  • ページの内容を正確にまとめよう
  • 各ページに固有のdescriptionメタタグを付けよう

と記されています。

追記(2017年6月)

そのページに適した description の考え方は Googleウェブマスター向けブログ(2017年6月5日月曜日)ユーザーに役立つ検索スニペット が参考になると思います。特に次の FAQ が分かりやすいです。

  • どのようなメタ ディスクリプションが適していますか?
  • メタ ディスクリプションについて、よくある問題を教えてください

また、description の作り方の詳細は Google Search Console ヘルプ 検索結果に効果的なタイトルとスニペットを作成する のページが参考になると思います。

キーワードを記述する?しない? <meta>keywords

keywordsメタタグは当初全ページに記述していましたが、これはあってもなくてもよいらしくスターターガイドにも記述がないので全ページ削除しました。

追記(2016年11月)

Googleウェブマスターヘルプフォーラムの中に「かなり前から Google検索エンジンは keywordsメタタグを無視している」旨の記述がありました。Yahoo!、Bing検索においても同じとのことです。

meta keywordsについて

モバイル端末の表示に対応 <meta>viewport

モバイル端末の表示に対応するためviewportメタタグを記述しました。モバイル端末対応と言ってもレスポンシブWebデザインにするのではなく、スマートフォンやタブレットなどの小さな画面にデスクトップと同程度の文字サイズで表示させるだけです。

<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
</head>

もしもこれを記述しないとスマートフォンの小さな画面の横幅と同じ幅にページが縮小表示され文字が全く読めなくなってしまいます。そうなると検索エンジンはユーザビリティを考慮していないサイトと判断して評価が下がるようです。

無料のウェブサービスでスマートフォンやタブレットでページがどのように表示されるかを見ることが出来ます。

Responsinator

下の画像はFirefox上で info.fuukemn.bizのトップページを表示した時のスクリーンショットです。

 

ご覧の様にデスクトップと同じくらいの文字サイズで表示されますが「ページトップに戻る」のボタンが本文に重なってしまいます。これはデスクトップの画面サイズに合わせてボタンの位置をFix(固定)しているためです。

ページトップに戻るボタンの上の3つのボタンが消えていることにお気づきでしょうか。これはモニター画面の横方向の幅が一定の値以下になると3つのボタンが非表示なるようにスタイルシートで設定しているためです。

このような事をホームページ全体に、モニター画面サイズによってデザインやレイアウトが変形するように施すことを「レスポンシブWebデザイン」と呼ぶことを今回初めて知りました。

追記(2017年1月)

www.fuukemn.biz の全ページをレスポンシブWebデザインにしてみました。ブレークポイントは 480pxのみです。下の画像は Fetch as Google と モバイルフレンドリーテストの結果です。info.fuukemn.biz は未対応です。

Fetch as Google結果の画像

Fetch as Google

モバイルフレンドリーテスト結果の画像1

モバイルフレンドリーテスト1

モバイルフレンドリーテスト結果の画像2

モバイルフレンドリーテスト2

詳細は PCサイトをレスポンシブウェブデザイン化した時のメモ

HTML5バリデーションエラーの修正 <link>stylesheet

当サイトでは写真などの画像をその場で拡大表示するツールLightbox Plusを使用していますがHTML5に対応しておらずバリデーションチェックをかけるとスタイルシートの読込みコードがエラーになります。

そこでW3Cが発行した Media Queries Level 4 Editor’s Draft, 26 October 2015に従って読込みコードを下記のように訂正してHTML5バリデーションエラーを回避しました。

<head>
<link rel="stylesheet" href="./resource/lightbox.css" media="screen and (color)" /> 
</head>
 

詳細は 画像拡大ツールLightbox PlusをHTML5で使えるようにしてみた

まとめ

以上の内容をまとめると自作ホームページのヘッダー部分はどのページも概ね次のような記述になっています。これは 2017年2月現在レスポンシブウェブデザイン化後のもので、変わったところは @import.cssをやめました。

もう1つ JavaScriptを </body>直前に配置しました。いずれもウェブブラウザがページを読み込む際のレンダリングを CSSなどがブロックするのを軽減するためです。モバイル端末を意識して行った事です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="Dell Optiplexにイン...を掲載しています。">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ubuntu 14.04LTSをXfceデスクトップで使う事にしよう|PCで遊んだ日々の備忘録</title>
<link rel="canonical" href="http://www.fuukemn.biz/page31.html">
<link rel="stylesheet" href="m-style.css">
<link rel="stylesheet" href="m-style2.css">
<link rel="stylesheet" href="m-style3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro">
<link rel="stylesheet" href="./resource/lightbox.css" media="screen and (color)" />
<link rel="shortcut icon" href="f2_1632.ico">
</head>
 

HTML記述の見直し <body></body>

見直した内容

  • HTML5バリデーションエラーの修正
  • HTML5とCSS3のソースコードの見直し|画像の最適化について
  • リンク切れのチェック
  • HTML5による文書構造(アウトライン)の最適化|最適化の効果

ホームページ作成当初からブログアプリケーションソフトは使わず全て手打ちでやる事を決めていました。これは単に基礎的なことを理解しておけば広範囲に応用が効く事を日常的に経験しているからです。

手打ちなのでタグのタイプミスや文法矛盾、閉じタグ忘れなど日常茶飯事になります。ここで厄介なのがミスの種類によってはウェブブラウザの補完機能で正常に表示されのるでミスに気が付かないことです。

HTMLに文法エラーがあると検索エンジンにコンテンツを正しく理解してもらえないことになります。なのでHTML5とCSSを検証するため下記のFirefoxアドオンとW3Cの検証サービスを利用しています。

ウェブ上で検証 Fierfox 56 アドオン HTML 5 Validator(英語)
ウェブ上で検証 W3C Nu Html Checker(英語)
ウェブ上で検証 W3C CSS Validation Service(日本語)

いずれも .htmlと.cssファイルをサーバーにアップロードした後、ウェブブラウザ上からの検証になります。

余談ですが_

上述のFierfoxアドオン HTML 5 Validatorで「HTML5とCSS3のハウツーサイトやリファレンスサイト」を検証してみて下さい。もれなくどのサイトも30~100件余りのバリデーションエラーが検出されます。おもしろいですね。

それでも検索上位に表示されているところを見るとHTMLに多少のエラーがあってもあまり神経質になる必要はないようですね。

HTML5バリデーションエラーの修正

当サイトでは写真などの画像を拡大するツールLightbox Plusを使用していますがHTML5に対応しておらずバリデーションチェックをかけると全ページの全ての画像の<a>タグがエラーになります。

そこでスクリプトファイルのコードとHTMLの属性を変更してHTML5バリデーションエラーを回避しました。

詳細は 画像拡大ツールLightbox PlusをHTML5で使えるようにしてみた

HTML5とCSS3のソースコードの見直し

HTML5とCSS3ともに独学自己流で始めてしまったので行き当たりばったりの構成になっていて.htmlと.cssのファイルサイズが無駄に大きくなっていました。

この無駄に重複した部分や必要ないと思われる装飾部分のスタイルシートを見直してファイルサイズをダイエットした結果.htmlのファイルサイズも以前より小さくなりました。

次に行ったのは文章全体を階層構造化するため<h*>見出しタグを正しく配置した事と画像のalt属性に適切な文言を入れて最適化しました。見出しタグの構造チェックはFierfoxアドオンの「Headings Map」が便利です。

以上の3点を2ヵ月ほどかけて全ページ見直しました。

画像の最適化について

画像の alt属性に適切な文言を入れることは最適化スターターガイドで推奨されています。

下の画像は Firefoxで Google画像検索した結果のスクリーンショットです。黄色の矢印部に画像のalt属性に入れた文章が表示されます。

 

画像の保存場所については全てルートディレクトリの1つのディレクトリに保存しています。なお画像にリンクを張ることは推奨しないとスターターガイドに書いてありました。

リンク切れのチェック

コンテンツ内の内部外部リンクが切れていると検索エンジンにメンテされていないと判断されページの評価が下がるようです。

HTML5による文書構造(アウトライン)の最適化

ページ内に記述している文章を <nav> , <article>,<section>,<h1>~<h6>タグを用いて検索クローラやスクリーンリーダーが理解できるように(構造的に)見直しました。

文書構造の記述チェックには「HeadingsMap」という Firefoxアドオンを使用しました。このアドオンはローカルでもサーバーアップロード後でも使用できます。

下の画像は当ページを HeadingsMapでチェックしたときのスクリーンショットです。ご覧のように文書構造が一目瞭然に確認できます。

 

ツリー先頭の数字(1,2,3,4,5)はそれぞれ見出しタグの <h1>~<h5>を表しています。

HTML5的に文書構造の矛盾がある場合、その部分が朱色にハイライトします。

最適化の効果

下の画像は文書構造最適化後にGoogle検索をした時のスクリーンショットです。

 

ページタイトルの下、スニペットの先頭に何やらリンクが表示されるようになり、クリックしてみると表示されているページの見出しタグへ飛びました。

どうやら <nav>~</nav>タグ内のリンクテキストが表示されているようです。これは言わばサブタイトルの形になっており、こうなってくるとナビゲートの文言も重要な役割を担っているわけですね。

ちなみに画像の最適化の効果でしょうか?画像検索結果のサムネイルの左3枚はそのページに記載している物です。

サイトマップと404エラーページを作成

HTMLサイトマップと404エラーページはサイトを訪れるユーザーの利便性のため作成しました。と言うのは後付けの理由で、実は管理人がサイトのメンテをしやすくするために作成したのが本当のところです。

Googleの検索エンジン最適化スターターガイドにサイトマップと404エラーページの設置に関する記述があります。

サイトマップについて

サイトマップには検索エンジンにページをインデックスしてもらうためのXMLサイトマップとFirefoxなどのウェブブラウザから特定のページを訪れる一般ユーザーに向けてサイト内に設置するHTMLサイトマップがあります。

XMLサイトマップ

XMLサイトマップ sitemap.xml ファイルはウェブ上のサイトマップ作成サービスを利用して作成・編集してrobots.txtといっしょにサーバーのルートディレクトリに配置しています。

robots.txtには検索エンジンにクロールしなくてもよいページと作成した XMLサイトマップ sitemap.xmlのパスを

User-Agent:*
Disallow:/page100.html
Disallow:/s_button.html

Sitemap:http://www.fuukemn.biz/sitemap.xml

のように記述しています。最後にsitemap.xmlファイルだけをGoogleの Search Console(旧ウェブマスターツール)にアップロードしておきます。

HTMLサイトマップ

最適化スターターガイドによるとHTMLサイトマップはページを訪れる一般ユーザーのためにに使いやすいものをとあります。

しかし実際何をどうすれば使いやすいのか分からないので管理人が使いやすいものを作りました。

下の画像は作成したサイトマップのスクリーンショットです。

 

404エラーページの作成とサーバーの設定

404エラーページはサイトに存在しないページをリクエストした時に表示されるエラーメッセージです。これは通常サーバー側のプログラムから発信されるので本当にただのエラーメッセージだけが表示されます。

最適化スターターガイドではトップページや関連ページのリンクを含んだhtmlファイルの設置を推奨しているのでそのようなページを作成しました。

下の画像は作成した404エラーページ 404.htmlのスクリーンショットです。

 
httpd.confの設定

次に作成した404エラーページ 404.htmlを機能させるためにはHTTPステータスコード404をサーバー側から返さなければいけません。つまりhttpd.confの設定が必要になります。

サーバーにログインしてrootに昇格後、次のコマンドを実行して

 # nano /etc/httpd/conf/httpd.conf 
     ⋮
#ErrorDocument 402 http://www.example...
ErrorDocument 404 /404.html
#
     ⋮
 

と記述して保存すれば設定完了です。下の画像は httpd.confファイルのスクリーンショットです。

 

自宅サブネット内の ホストマシン(Windows)からサーバーへリモート接続して作業しているところです。

雑感

本来は商用サイトで集客率を上げるためのSEOを商用サイトでもないどころか広告すらない当サイトでやってみた訳ですが、正直なところその効果にあまり期待していませんでした。

しかし当ページの内容を実施してから2~3週間が経ったころSEOって本当に効果があるんだと思うことになりました。

具体的にはそれまでGoogle検索で2~5ページあたりに表示されていたものが1~3ページまで上昇したり、中には検索ワード2語で50万ヒット1ページ目の1番目に表示されるようになったページも出てきました。

また、それまで日によって表示される位置が2ページ違っていたり、次の日消えていたりその次の日はまた表示されていたりとおかしな事になっていたページが安定して表示されるようになりました。

それより何より一番良かったことはサイトのメンテがとてもやりやすくなったことで、時間をかけただけの事はあったなと思いました。

下の画像は当ページの内容に沿ってSEOを実施した結果、表示順位が上昇したページのスクリーンショットです。いずれもGoogle検索1ページ目の表示ですが以前は2~5ページの間に表示されていたものです。

fig.1

検索ワード「テストベンチ台」で表示されたGoogle検索の画像

fig.2

検索ワード「pcie usb3.0 test」で表示されたGoogle検索の画像

fig.3

検索ワード「dell optiplex 755」で表示されたGoogle検索の画像

fig.4

検索ワード「hp xw8400 cpu」で表示されたGoogle検索の画像

 

ウェブサイトの広告ギミック多くないですか?

最近ホームページを開くといきなり視界を遮る広告が立ち上がってくるウェブサイト増えてませんか?あれ何なんでしょうね。アダルトサイトならともかく一般企業までやっている。

訪れたユーザーはいきなり目的以外のものを強制的に見せられてどうなんでしょう。いちいち閉じなければならずあまり気持ちのいいものではありませんよね。

それと、これは広告ギミックとは違いますが透過されたSNSの選択ボタンが本文にかかったまま Fix(固定)されていてスクロールしても全画面表示しても同じ場所に表示したままで気が散ってものすごく見ずらい。

このように人の目には質の低いコンテンツだなと判断出来ますが今のところ検索エンジンには判別出来ないようですね。しかし日進月歩の検索エンジンですから近い将来に判別できる日が来るのではないでしょうか。

ちなみに少し前のFlashを使った広告ですとウェブブラウザのアドオンでブロックできたのですが、上述の様な広告をブロックするアドオンは今のところないようです。

どうしてもそのページを閲覧したいときはウェブブラウザの表示機能の中の「スタイルシートを使わない」をチェックしてページの装飾を消してテキストと画像だけ表示させています。

長文の記事やブログなどはスタイルシート無しの方がテキストのフォントやフォントサイズがブラウザのデフォルト値になるので読みやすいです。

Firefoxでスタイルシートを表示しない設定の画像

Firefox

Internet Explorer 11でスタイルシートを表示しない設定の画像

Internet Explorer 11

スタイルシートを表示しない設定で表示したブラウザの画像

スタイルシート無しの表示

VivaldiとChromiumとMidoriのメニューの中に「スタイルシートを使わない」が見あたりません。とうやらWebKit系のブラウザには用意されていないようです。何故だろう。

Firefoxのリーダービューとアドオンを組合わせた広告フィルターを設定してみました|Firefox リーダービューで作る広告フィルター

Webブラウザ ベンダー目線のSEO

今回のSEOを一通り終えたあと、ふと現在のWebブラウザが何時どのような背景で誕生し、発展して行った(ウェブの進化 )のだろうと思い調べているうちにWebブラウザのベンダー側が考えるSEOが綴られた Mozilla Japan ブログに行きあたりました。

開発者向けのブログですが一度は目を通しておく価値があると思います。ここではブログの見出しのみ紹介します。

ブログタイトル|すべての人が使えるWebを開発しよう

  • 自分が思っているものとは違うブラウザを使っている人は、思ったよりも多い
  • ブラウザ互換性をあげることで、アクセシビリティも向上する
  • 利用者はブラウザを変えません。そのサイトを使うのをやめます
  • 互換性が保たれていること = 腕の良さ
  • ツールを使って効率のよい開発を
  • Web 本来の使命を果たすために

Google ダンスに遭遇しました(2017年7月)

新しく作成したページをサーバーにアップロード後、Googleにインデックスされたことを確認しました。しかし数日後 info: URLで検索するとインデックスから削除されていました。

削除されるようなことをした覚えはないので、サーチコンソールから Fech as Googleを実行して再度インデックスされたのですが、数日後また削除されていました。

その数日後 info: URLしてみるといつの間にかまたインデックスされていました。この間何もしていません。しかし今度はおよそ 6時間後またしてもインデックスから削除されていました。

これは何なんだろうと「インデックスされたり消えたり」で検索してみると、このような現象を「Google ダンス」と呼び時々発生するそうで明確な原因は不明のようです。

なお Fetch as Googleを実行した際 .xmlサイトマップも送信しておりこちらに記載している URLは全てインデックス済みになっています。

以下は info: URLで確認したドキュメントです。インデックスされた、または削除された正確な日時ではありません。

  • 2017年 7月 1日|新規ページをサーバーにアップロード
    • Fetch as Googleを実行後 インデックス された
  • 7月4日| 削除 されていた
    • Fetch as Googleを実行、再度 インデックス出現
    • サイトマップ(sitemap.xml)を送信
  • 7月6日|再び 削除 される
  • 7月7日|何もしていないが インデックス出現
    • およそ 6時間後 削除 される
    • 7月4日に送信したサイトマップは全てインデックス済みになっていた
  • 7月8日|削除からおよそ 14時間後何もしていないが インデックス出現
  • 7月9日|削除 される
  • 7月10日|削除からおよそ 24時間後何もしていないが インデックス出現
    • およそ 11時間後 削除 される
  • 7月11日|削除からおよそ 24時間後何もしていないが インデックス出現

といった具合に短期間に目まぐるしくインデックスと削除を繰り返しています。インデックスはされているようなのでこのまま放置、観察します。

7月13日、Google検索エンジンの仕様が少し変更になっています。この影響なのかもしれません。(ここで述べている仕様とは当サイトに対する仕様変更と言う意味です)

下の画像は当サイト内ページのGoogle検索結果のスクリーンショットです。

 

仕様が変わったところは、これまでスニペットの先頭にメニューリンク(上画像①)が表示されていました。

これに加えてスニペットの下段にそのページのメニューリンクが 3つ表示(上画像②)されるようになっています。

Search Consoleのスパムリンクが消えていた(2018年3月)

半年ほど前から Search Consoleの「サイトへのリンク」にあった150余りのスパムと思しきリンクがいつの間にか消えていました。

そのスパムリンクはネット上に公開されていたので URLを把握しており、当方では特にリンク否認などするでもなく放置しておりました。

これはスパムの被リンク、つまり自分のサイトのカテゴリーに関係ないサイトからの被リンクは無視・無効化される事をウェブマスターフォーラムを見て知っていたからです。

Googleは Search Consoleにスパムと判断したリンクを自動的に削除する機能でも追加したのでしょうかね?

MFI適用メールが届きました(2018年7月)

Search Consoleにモバイルファーストインデックス適用 ( Mobile-First Indexing Enabled for URL )のメールが届いておりました。

下の画像はそのメールのスクリーンショットです。

 

当サイトに適用された理由がメール本文中 Background:の最後のセンテンスに記述されているようですね。これを意訳してみると

私たち(Google)の分析は、貴サイトの モバイル版 と デスクトップ版 が同等であることを示しています

つまりこれが事前にアナウンスされていた「準備のできたサイトから適用する」ということなのでしょうね。

しかし MFIが適用されたからといって、当サイトの評価が変わるわけではないので何か特別な事をすることもありません。

XMLサイトマップについて

ふとMFI適用後のサイトマップは PC用?はたまたモバイル用?と疑問が湧きましたが少し考えてみると以下の事からPC用でよいと結論が出ました。

1.当サイトはレスポンシブウェブデザインなのでPCとモバイルは同じURL

2.サーバーに置いているrobots.txtに以下のコードを記述している

Sitemap:http://www.fuukemn.biz/sitemap.xml 

ここで云うモバイル用とはスマートフォン(ガラホ含む)のことです。ケータイ(ガラケー)ではありません。

ネット上にあるXMLサイトマップ作成サービスがPCとモバイルを分けていたので調べてみた次第です

▲ 目次へ

動画の構造化データマークアップを試してみた(2019年11月)

動画の構造化データをマークアップする(ページに埋め込む)ことで、どのように Google動画検索結果に表示されるのか試してみました。

下の画像はその結果のスクリーンショットです。

 

ご覧のように動画の検索結果に表示されるようになりました。

このページを Google Search Consoleでインデックス登録のリクエストをしてから 2週間程度かかりました。

下記は <body>~</body> にマークアップしたコードです。

 HTML 

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "VideoObject",
    "name": "VirtualBoxでマルチブート",
    "description": "VirtualBox上でマルチブートマネージャーにより Lubuntuを起動している動画です。", 
    "thumbnailUrl": "http://www.fuukemn.biz/video_9/mbm-ubuntu18-550x309_80.png",
    "uploadDate": "2019-10-12T06:37:24+09:00",
    "duration": "PT1M23S",
    "contentUrl": "http://www.fuukemn.biz/video_9/sample9.webm"
  }
  </script>
 

構造化データタイプは VideoObject で、参考にしたのは Search Consoleヘルプ 動画のベストプラクティス です。

必須プロパティ(属性)や推奨プロパティの詳細は こちらのページ にあります。

試してみてはいかがでしょう。

▲ 目次へ

Top of Pageの画像
sidemenuの画像