Google:サイト診断ができるセーフブラウジングでペナルティチェック

Googleのサービスでセーフブラウジングというサイトの診断ができるツールがあります。

自分のサイトがGoogleからペナルティを受けていないかやGoogleの巡回状況などをチェックすることが可能です。

検索順位が急にガクッと落ちた場合など、一度チェックしてみるといいかもしれないです。

下記にGoogleセーフブラウジング使用して、サイトの診断を行った時の方法ををメモします。
ものすごく簡単です。


セーフ ブラウジングでサイト診断

下記のURLの「site=」に診断したいサイトのURLを記述します。

http://www.google.com/safebrowsing/diagnostic?site=

URLを記述してアクセスすれば診断結果が表示されます。

http://www.google.com/safebrowsing/diagnostic?site=http://raining.bear-life.com/

これだけなので本当に簡単にチェックを行うことが可能です。

google_safebrowsing

・診断するサイトの現在の状況
・Googleがこのサイトを巡回したときの状況
・不正なソフトの感染を広げる媒介をしていたかどうか
・サイトで不正なソフトウェアをホストしていたかどうか

を調べることができます。


この方法だと毎日チェックするのも簡単に行えると思います。
自分のサイトがペナルティを受けていないかやウィルスに感染していないかなどが分かるのですぐに対応をとることができます。

またGoogleウェブマスターツールなどを使用してサイトのチェックをすることも非常に重要なのでチェックしてみてください。

.htaccess:存在しないURLを404ページにリダイレクトする

WEBサイトで存在しないページにアクセスすると英語の画面が表示される場合があります。

404_not_found

これは、存在しないページにアクセスした時に表示されるエラーページ(404ページ)です。
リンク切れをしていたり、URLを間違えて入力した場合などに表示されます。

上記のような英語の画面だとユーザが何のページかわからず、戸惑ってしまう可能性があります。
また、サイトから離脱してしまう可能性も出てきます。

なので、独自の404ページを用意し、ページが存在しないことをユーザに伝えることが非常に大切だと思います。

下記に.htaccessを使用し、存在しないページにアクセスした際に独自の404ページリダイレクトする方法をメモします。


.htaccessで404ページにリダイレクト

まず独自のカスタム404ページを作成します。

404.html

.htaccessに下記のコードを記述します。

ErrorDocument 404 /404.html

作成した「404.html」と「.htaccess」をドキュメントルートに設置します。

存在しないURLでアクセスし、作成したカスタム404ページが表示されればOKです。


WordPressの404ページ

WordPressで404ページを作成する場合は使用しているテーマのディレクトリに「404.php」を設置します。
.htaccessに404リダイレクトの処理を記述しなくて大丈夫です。

存在しないページにアクセスすると「404.php」の内容が表示されます。


色々なWEBサイトを見ていると404ページが設置されていないサイトが多くあると思います。
レンタルサーバだとそのサーバの404ページが表示されます。

404ページを作成することで、ページが存在しないことのメッセージをユーザに伝えることができます。
404ページにサイト内検索やTOPページへのリンク、サイトマップなどを記述することでユーザビリティの向上につながります。
また、SEO的にも有効だと思います。

ショップサイトなどでは、商品が売り切れになってページがなくなることがあると思うので、
新着商品やおすすめ商品などの紹介をするのもいいかもしれません。

ぜひチェックしてみてください。

jQuery:画像の拡大(ズーム)表示ができるプラグイン「elevatezoom.js」

画像をマウスオーバーした時に、画像の一部をズームして拡大表示することができる
jQueryプラグインelevatezoom.js」をご紹介します。

elevatezoom.js

jquery_elevatezoom

マウスオーバーした時に画像を拡大させて見せることができるので、
ショップなどの商品画像を見せる際などに利用できると思います。

下記にjQueryプラグインelevatezoom.js」を使用して、画像の一部をズームさせて拡大表示したときの方法をメモします。


「elevatezoom.js」の設置方法

下記URLより、ダウンロードします。

http://www.elevateweb.co.uk/image-zoom

ダウンロードした「jquery.elevatezoom.js」を読み込みます。

共通で読み込むファイル

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="jquery.elevatezoom.js" type="text/javascript"></script>

JS

<script type="text/javascript">
$(function() {
    $("#zoom").elevateZoom();
});
</script>

HTML

<img id="zoom" src="small_image.jpg" data-zoom-image="large_image.jpg" />

ページに表示する画像と拡大した時の画像の二つを用意するか、
ページに表示する画像のサイズを小さくして表示させます。

「src=””」に表示される画像を設置し、「data-zoom-image=””」に
拡大した時の画像を設置します。

 

サンプルページ:【jQuery】画像のズーム機能「elevatezoom.js」

 


また、オプションで表示の仕方などを変更することが可能です。

・画像の中でズームさせる場合

$("#zoom").elevateZoom({
	zoomType : "inner",
	cursor: "crosshair"
});

・虫眼鏡のレンズのように表示させる場合

$("#zoom").elevateZoom({
	zoomType : "lens",
	lensShape : "round",
	lensSize : 200
});

・フェードイン、フェードアウトさせる場合

$("#zoom").elevateZoom({
	zoomWindowFadeIn: 800,
	zoomWindowFadeOut: 800,
	lensFadeIn: 800,
	lensFadeOut: 800
});

・マウスホイールでズームの大きさを変更する場合

$("#zoom").elevateZoom({
	scrollZoom : true
});

・ズーム表示のサイズを変更する場合

$("#zoom").elevateZoom({
	zoomWindowWidth: 500,
	zoomWindowHeight: 200
});

他にも色々なオプションがありますので、ぜひチェックしてみてください。