静岡のHP屋コラム

Googleは、どういったホームページの運用方法が望ましいかを「ガイドライン」という形で公開しています。

その中で、「具体的なガイドライン」として「次のような手法を使用しないように」としている項目があります。多少専門的な内容や技術的な言葉が出てきますので、今回はそのガイドラインの中から、間違っている・さらにはマイナス効果に繋がってしまう「やったらダメなSEO対策」について、噛み砕いてご説明します。

現在、日本ではほとんどの人がYahooかGoogleのどちらかの検索エンジンを利用していますが、検索順位に関する評価基準は、実はYahooもGoogleの評価基準と同じものを採用しています。

つまり、今は「どうやったらGoogleに好かれるか」ということが重要です。
Googleの評価基準では、サイトを見ている人の利便性を最重要視しています。

※ちなみに、恥ずかしながら過去にこのサイトも、検索エンジンからペナルティを受けたことがあります。一時期、他サイトからたくさんのリンクを貼ったところ、「HP制作　静岡」での検索順位が2位から62位まで下落しました。

その被リンクを外し、Googleに対して「すみません。こういう手段を使って、故意に被リンクを増やしました。今はそのリンクを外しましたので、もう一度評価してください」というメッセージを送ったところ、順位が元に戻りました。皆さんもご注意ください。

このページに記載した、やったらダメなSEO対策はあくまで一部です。

これらの対策を行ってしまうと、検索順位の下落や、悪質と判定された場合にはGoogleの検索結果から完全に削除されてしまうこともあります。

また、ガイドラインに記載されていない不正行為についても、Googleで対応策を実施することがありますし、逆にガイドラインに記載されていない行為が許可されているとは限りません。

抜け道を探すことに時間をかけるより、ガイドラインを遵守した「見ている人の利便性」を挙げていくことで、検索結果の上位表示を目指しましょう。

また、SEOに関する無料のセミナーを2016年10月12日に開催することが決定しました。
SEOのプロ、株式会社ディテイルクラウドクリエイティブ 代表の南雲宏明 氏をお招きして、検索結果上位10万サイト以上を分析して抽出した統計データを元に導き出された、自社で実施できるSEOのポイントをご解説いただきます。

せっかくきれいに撮れたのに斜めに傾いてしまった・・・
そんな写真も「Pixlr Editor」を使えば簡単に修正することが出来ます。

※「Pixlr Editor（ピクセラエディタ）」とは、インターネットにつながっていればブラウザ上で画像編集ができる無料のwebサービスです。

今回の修正は・・・
今回はこちらの写真！
斜めに撮影してありますが、海を基準に水平になるよう修正していきます。

手順

1.Pixlr Editor（https://pixlr.com/editor/）にアクセスし
　「コンピューターから画像を開く」より修正したい画像を選びます。

2.上部にあるメニューより「編集」をクリックし、その中の「自由変形」を選択します。

3.画像四隅の■付近にカーソルを近づけると、円を描いた矢印に変わります。
　矢印が変わったら、クリック＆ドラッグして海が水平になる角度まで調整します。

4.調整できたら「Enter（エンター）」キーを押すと変更が適用されます。

※ここから回転でキャンパスに白い部分が出てきてしまったため、写真を切り抜いて修正していきます

5.左横にある「ツール」内、一番左上にある「切り抜きツール」を選択します

6.画像内をドラッグする切り抜き範囲が指定できる枠が出てきます。
選択枠が出たら四隅の■をドラッグし、白い部分の内側で切り抜けるように調整します。

7.調整できたら「Enter（エンター）」キーを押し確定します。これで修正が完了しました。

8.最後に完成した画像を保存します。
上部のメニューより「ファイル」をクリックし、その中の「保存」を選択します。

※保存を押すと下記のウィンドウが開きます。「OK」で保存が出来ます。

9.最後にファイル保存ウィンドウが開くので、保存場所とファイル名を確認して「保存」を押したら完成です。

★画像が出来ました！★

斜めに傾いてしまった画像を修正したい時！ぜひ無料のPixlrEditorで修正してみましょう！

みなさま無料画像編集サービス「Pixlr Editor（ピクセラエディタ）」をご存じでしょうか？

Pixlr Editor（ピクセラエディタ）とは、インターネットにつながっていれば、ブラウザ上で画像編集ができる無料のwebサービスです。

こちら、無料のサービスですが画像編集の基本機能はしっかり揃っていてPhotoshopなどのソフトを持っていなくても、簡単な画像加工であれば問題なく出来てしまう超優秀なwebサービスなんです！

webサービスのため、始め方はすごく簡単！
Pixlr Editorのwebサイト（https://pixlr.com/editor/）にアクセスするだけで画像加工が始められます。

こちらのサービスは会員登録が不要なため、気軽に始めることが出来るのも魅力のひとつです。

▼Pixlr Editorにアクセスするとこんな画面が開きます。

・切り抜き
・リサイズ
・回転
・テキストの配置
・ブラシツール
・合成、レイヤーの作成
・画像調整（明るさ・コントラスト、色調・彩度、レベル調整など）
・ヒストリー管理機能
・各種エフェクト、フィルター

などなど

無料とは思えない程の充実っぷりです！
バナー画像を作ったり、写真の修整・調整をしたりに必要な機能はだいたい揃ってるのではないでしょうか？

ソフトは持ってないけれど画像加工をしたい！
そんな時は「PixlrEditor」を使ってみてはいかがでしょうか？

いきなり結論から入りましたが、皆さんは「トレイリングスラッシュ」ってご存知でしょうか？
ホームページ制作などを行っている人なら聞いたことがあるかもしれませんが、ほとんどの方は耳なじみがない単語だと思います。ちなみに私は、最初に聞いた時にドラ○ンクエ○ト系の必殺技かと思いました。

「トレイリングスラッシュ(trailing slash)」とはURLの最後につく「/(スラッシュ)」のことです。

多くのWebサイトはこのような動作をするのではないでしょうか？
これはユーザに見えないところで最終的に同じファイルを閲覧するようにサーバやブラウザが動作しているからです。
ですので、この場合トレイリングスラッシュはあってもなくても構いません。

※別URLで同じページが表示されることでコンテンツ重複が発生し、SEOで不利になるのではないかという話がありますが、検索エンジンの方で正規化して処理されるため、この部分をシビアに気にする必要はありません。

改めて記載するしなくてもわかると思いますが、この場合は表示したい方のURLを使うようにしてください。個人的な意見になりますが、スラッシュがない場合は

http://example/company.html

のように拡張子も一緒に記載した方が誤認識が発生しにくいのでおすすめです。

そもそもなぜURLが異なるのに同じページが表示される場合があるのかという部分について少し説明します。

トレイリングスラッシュがあってもなくても同じページが表示される場合、最終的に参照するファイルは同じファイルとなります。

ただし、ファイルにたどり着くまでの過程がURLにより異なります。

[スラッシュあり]

[スラッシュなし]

URL中の"/"はパソコンの"￥"のようなもので、フォルダ(ディレクトリ)の階層を表しています。
トレイリングスラッシュが有る場合は"profile"というフォルダ(ディレクトリ)の中を参照します。

上記のURLですと実際は以下のファイルを表示しています。

※サーバなど設定によりindex.html、index.htm、index.cgi、index.phpなどを参照する場合がありますが今回はややこしくなるので省略します。

トレイリングスラッシュがない場合は、"company"というフォルダ(ディレクトリ)の中の"profile"という名称のファイルを参照しようとします。

しかし、"profile"という名称のファイルがないため、トレイリングスラッシュがある場合と同様に
"profile"というフォルダ(ディレクトリ)の中を参照します。

このように最終的に参照するファイルは同じものですが、トレイリングスラッシュがない場合の方がファイルにたどり着くまでの手順が1つ増えます。

手順が1つ増えるといってもユーザ側で意識する必要はないので、トレイリングスラッシュはあってもなくてもどちらでも構いません。

スマホユーザーは近年増え続けています。皆さんも、通勤・通学のスキマ時間にネットで検索したり、家で寝ころびながらネットショッピングなどされているのではないでしょうか。

数年前であれば、パソコンが中心となっていたインターネットの利用も、スマートフォンやタブレットなどのモバイル端末の普及に伴い、ここ数年はパソコンからスマホへと移行されてきました。

今回は、最近よく耳にする「ホームページのスマホ対応」とその必要性について書いていきます。

スマホ対応サイトとは、ざっくりいうと「スマートフォンからでも見やすい・使いやすいホームページ」のことです。普段何気なくスマートフォンを使っていますが、スマホでインターネットにアクセスした際にはスマホ対応のWEBサイトが表示される仕組みになっています。

スマホとパソコンでは異なる点が多いため、パソコン用のホームページをスマホで読み込むと表示に時間がかかったり、文字や画像が小さくて見にくくなってしまったりと、ストレスを感じたことがある方も多いかと思います。

それでは、スマホ対応サイトでない場合、具体的にどんなことがおこるかをまとめてみます。

１．見づらい

パソコンとスマホの違いの1つとして画面の大きさが挙げられます。パソコン用のサイトでは、画面がある程度大きい前提で造られていますので、文字や画像が小さくて読みづらくなってしまいます。この時点で、約半数（45％）の人が反射的に他のサイトを見に行ってしまうといわれています。つまり、ビジネスでホームページを使っている場合は、潜在的な見込み顧客を取りこぼしていることになってしまいます。

パソコン用サイトをスマホで見ることもできますが、拡大、縮小したりするのは面倒ですし、拡大すると画面内でページが縦横無尽に動くので、誤って行きたいページとは別のページへのボタンを押すこともしばしばです。場合によってはパソコン用サイトしか見れないコンテンツもあります。

２．操作しづらい

次にパソコンとスマホの違いとして挙げられるのが、操作の仕方です。マウスやマウスパッドを使ってカーソルを移動してクリックするパソコンに対して、スマホの操作は指での操作することを意識しなくてはなりません。

例えば、メニュー等で他ページへ移動するボタンが並んでいた場合にボタンを押し間違えてしまったり、入力フォームで次の項目に移動する時に違うところに行ってしまったりと、見ている人のストレスになる要素を多く含んでいます。

３．表示が遅い

特に最近では、外出先や自宅からスマートフォンでホームページを見るケースが増えてきています。その為、腰を据えてじっくり調べ物をするよりかは、手軽にサクッと調べる傾向になってきています。ここで注意するのはインターネット回線の速度です。

携帯の電波を使ってデータを送受信するので、自宅や会社でインターネットを使うのと比べてどうしてもホームページの読み込み速度が遅くなってしまいます。サイズの大きい画像を使っていたり、動画を埋め込んでいたりすると、表示が完了するまで数秒間待たなければいけないなんてことも発生します。

４．検索エンジンの上位表示に不利

検索エンジン(Google)は、ホームページがスマホ対応しているかどうかを認識していて、ホームページをスマホ対応していることが検索順位を決める重要な要因となっています。

簡単に言えば、スマホ対応しているサイトは、対応していないサイトよりも上位に表示されやすくなり、逆にスマホ対応していないサイトは不利、ということになります。詳しくはこちらの記事「検索エンジンがホームページのスマホ対応に本気出してきました。」にも書いています。

モバイルファースト（スマホサイト第一に考えてホームページをつくること）という言葉もあるぐらい、スマホ対応サイトを持つことは重要になっています。

せっかくホームページを見に来てもらったのに、スマホで⾒たときに｢⽂字が⼩さくて⾒えない…｣｢押したいところが押せない！｣なんてことにならないよう、今後はスマホで⾒やすく､使いやすいホームページを意識していくことが必要です。

また、当社では、スマホでのホームページ活用セミナーを開催しています。今回のセミナーでは下記内容で開催します。

・スマホ対応サイトって何ですか？スマホサイトの必要性
・ユーザーにストレスを感じさせない集客の仕掛けづくり
・スマホサイトを効果的に活用した事例紹介
・時流に合ったホームページ活用方法

参加無料、各会場とも定員先着5名様で開催しておりますので、お気軽にご参加ください。

検索エンジン(Google)は、ホームページがスマホ対応しているかどうかを認識しています。
昨年のアーティスティックス通信4月号にも書きましたが、2015年の4月より、ホームページで
スマホ対応していることが検索順位を決める重要な要因となっています。

簡単に言えば、スマホ対応しているサイトは、対応していないサイトよりも上位に表示されやすくなる、ということなのですが、2016年の5月よりこの傾向がさらに強くなると言われています。

また、Googleでの検索画面では右側の広告枠がなくなりました。これは、モバイル端末の優先、またはパソコンとスマホの表示統一の為といわれており、この先もスマホユーザーの優先度はどんどん高くなっていきそうです。

スマホ対応していないサイトは、人間から見ても見にくく、操作しにくいものです。

ホームページがスマホ対応しているかどうか不安な方は、検索エンジンで
「モバイルフレンドリー　テスト」
と検索してみてください。(PCやスマホで閲覧されている方はリンクをクリック)

スマホ対応しているかどうかをチェックしてくれるツールが出てきますので試してみてください。
「まだスマホ対応していない！」という方はお早めの改善をオススメします。

今回はマニアックな内容ですが、自分の備忘録としてSPFレコードの書き方についてまとめます。

一般的には上記のような形になります。
ダブルコーテーションの外側の部分はTXTレコードの書式となり、お使いのサーバ・サービスなどにより多少異なります。

SPFレコードは「v=spf1 +ip4:192.168.0.1 -all」の部分となり、上記の例では色分けしておりますが、基本的に以下の書式となります。

<SPF version> <qualifier><mechanism>:<値>

上記の例に当てはめていきますと、「<SPF version>」が「v=spf1」、「<qualifier>」が①の「+」と④の「-」、「<mechanism>」が②の「ip4」と⑤の「all」、「<値>」が③の「192.168.0.1」の部分となります。

また、上記例でもそうですが、「<qualifier><mechanism>:<値>」は複数回書くことができます。以下にそれぞれ詳細を記載していきます。

基本的に「v=spf1」と記載すればOKです。
それ以外に「spf2.0/pra,mfrom」と記載する場合もありますが、個人的には「v=spf1」と覚えておけば大丈夫だと思っています。

よく「v=spf1.0」と書いてエラーになってしまう場合がありますので注意しましょう。

qualifier - クオリファイアは後ろに続くmechanism - メカニズムがマッチした場合に、その認証結果をどうするかを指定します。

また、qualifierは省略することも可能で、省略した場合は「+」として処理されます。
種類とそれぞれの意味についは以下表のとおりです。

※備考の内容は一般的に行われる処理となります。実際の処理については受信サーバ側の設定に依存するため、SoftFailでも配信拒否されるっといった可能性もあります。

mechanismと値は判定ルールのようなもので、記載したルールにマッチした場合に設定していたqualifierの値を返します。
また、mechanismはいくつも記載することができ(※)、左側に記載したほど優先してマッチしているかが評価されます。前述にもありますが、mechanismはいろいろな種類がありそれぞれの内容を以下に記載しています。

※いくつかのmechanismを使用したい場合、必ずひとつのSPFレコードに記載します。
SPFレコード自体を複数、指定するとエラーになりますので注意が必要です。

「ip4」は指定したIPアドレスと送信元のIPアドレスが一致するかを確認します。上記のように"/16"とすることでマスク指定が可能です。
また、"ip4"ではなく"ip6"と記載することでIPv6での指定も可能です。

「mx」は指定したドメインのMXレコードに設定されているドメインのIPアドレスと送信元のIPアドレスが一致するかを確認します。

「a」は指定したドメインのAレコードに設定されているIPアドレスと送信元のIPアドレスが一致するかを確認します。

「include」は指定したドメインのSPFレコードを確認します。

「all」は他のメカニズムとは違い必ずマッチするメカニズムです。
基本的にSPFレコードの最後に記載し、その他のメカニズムにマッチしなかった場合にどのクオリファイアを返すのかを指定します。

イメージとしてはSPFレコードのデフォルト値の設定のようなものです。

「ptr」は送信元のIPアドレスの逆引きによって取得したドメインと指定したドメインが一致するかを確認します。「ptr」はDNSサーバの不可が高くなるといった理由からあまり推奨されていないので、使う機会はほとんどないです。

「exist」は指定ドメインにAレコードが存在するかを確認します。「exist」もあまり使うことがないメカニズムだと思います。正直私も使いどころがわかっていません。

本記事では割愛しましたが、Modifier - モディファイア(ちょっと特別なMechanismと思ってください)というくくりで"redirect"と"exp" という指定方法も存在します。気になる方は検索してみてください。

ちょっと長くなってしまいましたが、SPFレコードの書き方は上記のような書式・意味となります。DNSレコードは一文字間違えるだけで正常に動作しませんので実際に設定する場合には必ず動作確認を行うようにしましょう。