Category Archives: 内部対策SEO

ターゲットブランクタグとは?target=”_blank”の正しい使い方

この記事を読むのに必要な時間:01分05秒

Webページに貼るリンクには、大きく分けてふたつの種類があります。

ひとつ目は、同じタブ、ウィンドウで開くリンク。
ふたつ目は、別のタブ、ウィンドウで開くリンクです。

みなさんも経験があると思いますが、リンクをクリックしたときに、今見ているページに上書きするような形でリンク先のページが表示されるパターンと、今見ているページとは別に、新しいタブが開いてリンク先のページが表示されるパターンです。

今日は、このふたつのリンクの使い分けについてお話しします。

ふたつのリンクタグ
このふたつのリンクは、タグで表すと以下のようになります。

同じタブ、ウィンドウで開くときのリンクタグ
<a href=”リンク先のURL”>アンカーテキスト</a>
Web上ではこう見える → アンカーテキスト

別のタブ、ウィンドウで開くときのリンクタグ
<a href=”リンク先のURL” target=”_blank”>アンカーテキスト</a>
Web上ではこう見える → アンカーテキスト

※アンカーテキストとは、HTMLの中でリンクが設定された文字のことです。
<a href=”リンク先のURL”>と</a>で囲まれた部分をアンカーテキスト、またはリンクテキストと言います。


つまり、「リンク先を別のタブ、ウィンドウで開く」という指示を出したいときは、リンクタグに『target=”_blank”(ターゲットブランク)』このタグを追記します。

ちなみに上記の通り、Web上では、どちらに指定されているかは判別できません。

ターゲットブランク(target=”_blank”)の正しい使い方
そもそも正しい使い方なんてものはないのでしょうが、ターゲットブランクを入れることによって、離脱が防げる可能性が高まります。

例えば、あなたのWebページに外部サイトへのリンクが貼ってあるとします。
ターゲットブランクが入っていないと、当然、今ユーザーが見ていたページにリンク先のページが表示されます。
そこから、ユーザーはさらに外部のページやサイトをネットサーフィンし、その過程で他のことに興味が移り… 気づけばもともと見ていたあなたのサイトのことは忘れてしまいます。

これは、ネットではよくある話です。

ターゲットブランクを挿入していれば、別のタブやウィンドウにリンク先のページが表示されるので、ユーザーはタブやウィンドウを切り替えるだけで、簡単にあなたのサイトに戻ることができます。

反対に、あなたのWebサイト内のページにリンクをする(内部リンク)場合、ターゲットブランクはつけない方がいいと思います。

でないと、リンクをクリックするたびに新しいタブやウィンドウが開かれ、ユーザーが鬱陶しく感じてしまうかもしれません。

WordPress(ワードプレス)の場合
WordPressでビジュアル欄を使用している場合、リンクの挿入時に「リンクを新ウィンドウまたはタブで開く」のチェックボックスにチェックを入れると、ターゲットブランクが挿入されます。

WordPressのビジュアル欄を使用しているときのリンクにターゲットブランクを挿入する方法
常にユーザー目線で考える。
離脱を防ぐ方法としてご紹介しましたが、大事なのはユーザー目線で考えることです。
このリンクの場合、ユーザー的には、どちらのパターンの方が良いのだろうか… これを常に考えてください。

一概に、どちらが良いとは言い切れませんが、ひとつの考え方として頭に入れておいてください。


Posted in SEO, Webの知識, Webサイト制作, Webマーケティング全般, WordPress(ワードプレス), 内部対策SEO, 初心者向け | Tagged , , | Leave a comment

Webページの読み込み速度(表示速度)が遅いときの改善方法

この記事を読むのに必要な時間:04分23秒

今回は、前回告知した通り、Webページの読み込み速度(表示速度)を測定する方法の続編です。

どうやって読み込み速度を改善したらいいのか、その方法についてお話しします。

このブログも今回ご紹介する方法で大きく改善することができました。
Webページの読み込み速度(表示速度)が遅くなる原因
では、まず、読み込み速度が遅くなる原因から。

Webページの読み込み速度が遅い原因
・パソコン、スマートフォンなどのデバイスの性能の問題
・回線速度の問題
・Webページの容量の問題

こんなところでしょうか。

デバイスの性能と回線速度の問題は、ユーザー側の問題になるので、今回は、3つ目のWebページの問題を改善する方法をご説明します。

画像を圧縮して容量を落とす方法
Webページの容量の問題を手っ取り早く改善するには画像の容量を下げることです。

ですので、まずは、PNGとJPG画像を圧縮するツールをご紹介します。

どちらも無料のオンラインサービスのため、インストールは必要ありません。また、登録なしで利用可能です。
PNGファイルを簡単&キレイに圧縮できるツール
パンダのキャラクターが目を引く『TinyPNG』です。

TinyPNGのインターフェイス

使い方は簡単。

画像をドラッグ&ドロップするだけです。(画像の最大容量は3MBまで、1度に処理できる画像は20個まで)

TinyPNGの使用方法

アッという間に89%も圧縮完了。スゴい!

TinyPNGの画像圧縮後の画面

ちなみに、これがビフォアー・アフターです。

どうですか?このクオリティ!

TinyPNGでのビフォア・アフター画像

PNG画像を簡単&キレイに圧縮できる TinyPNG はこちら >>
JPGファイルを簡単&キレイに圧縮できるツール
JPGは、『JPEGmini』がおすすめ。

とにかくUX(ユーザーエクスペリエンス)が素晴らしい!とてもよくできたサイトです。

JPEGminiのインターフェイス

こちらも使い方は超簡単!

「Try It Now」をクリックします。

JPEGminiの使用方法 その1

それから、「Upload Your Photo」から圧縮したい画像を選択するだけです。

JPEGminiの使用方法 その2

圧縮が終わると、どれくらい圧縮できたのか確認することもでき、また、オリジナル画像と圧縮後の画像を見比べることもできます。

この辺りのUXもイイです。

「Download Photo」をクリックすると保存できます。

JPEGminiの画像圧縮後の画面

こちらもビフォアー・アフター。

こっちのクオリティもヤバい!

JPEGminiでのビフォア・アフター画像

JPG画像を簡単&キレイに圧縮できる JPEGmini はこちら >>

こんな素晴らしいサービスが無料&登録なしで使えるなんてスゴい時代になりましたね。
画像をスクロールに合わせて表示させるjQueryプラグイン
実は、今日は、ここからが本題だったりします。

画像の圧縮と是非併せて使ってもらいたいのが、jQueryプラグイン『Lazy Load』。

jQuery(ジェイクエリー)とは、JavaScript(ジャヴァスクリプト)ライブラリの1つ。

JavaScriptは、文字や画像などにさまざまな「動き」がつけられる言語です。まあ、とりあえず、難しいことは置いておきましょう。

『Lazy Load』をWebサイトに組み込むと、画像を一気に読み込まず、スクロールに合わせて読み込むようになります。

ページの表示と同時に画像をすべて読み込まないので、読み込み速度が短縮されるのです。

最近、いろいろなWebサイトで見かけるようになってきました。

ちなみに、このブログでも Lazy Load を組み込んでいるのですが、わかりますかね??

わかりづらければ、こっちのサイトの方が顕著にわかるかもしれません。
Lazy Load の使い方
それでは、Lazy Load の使い方です。

まず、「jquery.lazyload.js」をダウンロードします。

上記の「jquery.lazyload.js」のテキストの上にカーソルを置いた状態で「右クリック」 → Google Chrome、Firefoxの場合は、「名前を付けてリンク先を保存」、IEの場合は、「対象をファイルに保存」。「jquery.lazyload.js」のファイル名(そのまま保存すればOKです。)でダウンロード(保存)します。

jquery.lazyload.jsをGoogle Chrome、Firefoxでダウンロードする方法

jquery.lazyload.jsをIEでダウンロードする方法

jquery.lazyload.jsを保存する方法

次に、ダウンロードした 「jquery.lazyload.js」 を 「js」 など任意のディレクトリを作成し、サーバーにアップロードします。


そして、読み込み速度を改善したいWebページのhtmlファイルの headタグ 内に、

<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1′></script>
<script type="text/javascript" src="js/jquery.lazyload.js"></script>

と書き込みます。



次は、読み込み速度を改善したいWebページのhtmlファイルの bodyタグ 内に、

<script type=”text/javascript”>
$(function() {
$(“img.lazy”).lazyload();
});
</script>

と書き込みます。



最後に、読み込みを制御したい画像を以下のように指定すればOKです。

<img class=”lazy” src=”image/画像.gif” data-original=”image/画像.gif” alt=”画像の説明” width=”幅” heigh=”高さ” />



実際にWeb上でチェックしてみてください。
WordPress(ワードプレス)で Lazy Load を使用
WordPressでWebサイトを運営している方はこちらを。

プラグイン画面で、「Lazy Load」と検索します。



「Lazy Load」をインストール。



有効化して完了。これだけです。


読み込み速度のカスタマイズ方法
読み込み速度を変更したい場合は、プラグイン編集画面で「Lazy Load」の「編集」を選択。


プラグインファイルから「Lazy-load/js/lazy-load.js」を選択。


distance:200 の「200」を任意の数値に変更します。

数値が大きくなるほど読み込み時間が速くなります。

反対に、数値を小さくすると画像がゆっくり表示されるようになります。



この辺りは、お好みで実際の表示速度を確認しながら微調整してください。

以上が、WordPressに「Lazy Load」を導入する方法です。
「Lazy Load」の効果を検証
それでは、気になる「Lazy Load」の効果を見てみましょう。

前回ご紹介した『GTmetrix』で検証してみました。



なんと、12.64秒から9.19秒… と3.45秒も短縮されました!スゴい!

というわけで、長々と書いてきましたが、画像の圧縮と「Lazy Load」を組み合わせれば、Webページの読み込み速度を改善することができます。

みなさんも是非是非お試しください!

今回もありがとうございました!


Posted in SEO, Webサイト制作, 便利ツール, 内部対策SEO | Leave a comment

Webページの読み込み速度(表示速度)を測定する方法

この記事を読むのに必要な時間:02分58秒

早く次のページを見たいのに、Webサイトの読み込み速度(表示速度)が遅くてイライラした経験ってありませんか?

あなたが感じているこのイライラ、実は、あなたのお客さまがあなたのサイトに感じているのかもしれません。

せっかく時間をかけて良いサイトを作ったのに、読み込み速度が遅いがために離脱され、他のサイトへ行ってしまう… これは大問題です。

SEOよりもユーザビリティを考慮して対策する。
「検索エンジンを対策する前に、まずは、お客さまに目を向けましょう。」と、このブログでも何度かお伝えしていますが、今回の問題も例外ではなく、Webページの読み込み時間がランキングに影響する問題よりも「読み込み速度が遅いがために離脱され、他のWebサイトへ行ってしまう…」この問題のほうがはるかに大きな問題です。

読み込み速度を改善しただけで上位表示は期待できませんが、ユーザビリティの向上にはかなりの効果があるはずです。

Webページの読み込み速度を改善するメリット
読み込み速度を改善すると、ユーザビリティの向上に加えて、以下のようなメリットが考えられます。

Webページの読み込み速度を改善するメリット
・ユーザビリティの向上
・離脱率、直帰率の低下を防げる。
・コンバージョン率(成約率)の低下を防げる。
・検索順位の上位表示にプラスになるかもしれない。(マイナスにならないかもしれないの方が合ってるかも…)


ユーザーの満足度が上がれば、成約に繋がる可能性も上がるわけですね。
というよりも、読み込み速度が問題で閲覧されないのであれば、スタートラインにも立てないですね…。

Webページの読み込み速度(表示速度)を確認する方法
ですので、ページの読み込み時間は、重要なポイントになるわけです。

まずは、自分のWebサイトの読み込み速度がどれくらいなのかを把握しましょう。

読み込み速度を確認する方法はいくつかありますが、今回は2つの方法をご紹介します。

ツールを使って計測する方法
まずは、ツールを使って計測する方法です。

そのツールは、『GTmetrix』。
インストールや登録なしでWeb上で読み込み速度を確認できるすぐれものです。

英語のサイトですが、シンプルなツールですので困ることはないと思います。

GTmetrixのインターフェイス

使い方は、URLを入力して「GO」をクリックするだけです。

GTmetrixの利用方法 その1

チェックしたいWebサイトのサムネイルが表示され、いかにも調査してます!的にスキャナーが上下するUX(ユーザーエクスペリエンス)がいい感じです。

GTmetrixの利用方法 その2

こんな感じで結果が出ます。

GTmetrixの測定結果

この下に測定結果のレポートがズラリと出るのですが、今回は読み込み速度の部分だけ説明します。

1. Page Speed Grade
これは、Googleが提供する表示速度計測ツール「Page Speed」での評価です。
数値が高い方が読み込みが速く、アルファベットはAが最高評価、Fが最低評価となります。

2. YSlow Grade
こちらは、Yahoo!が提供する表示速度計測ツール「YSlow」での評価。
詳細は、上記のPage Speed Gradeと同じです。

3. Page load time
指定したページの読み込みに要した時間です。

4. Download PDF
測定結果をPDFとしてダウンロードすることもできます。

このブログを計測した結果、Google、Yahoo!での評価は悪くないにしても、読み込み時間に関しては、8.94秒と改善の余地ありまくりですね…。

ただし、これらの評価は、諸条件によって変動しますので、あくまでも目安として考えてください。

Webページの読み込み速度を計測できる GTmetrix はこちら >>

Googleアナリティクスを使った確認方法
Googleアナリティクスでも読み込み速度を確認することができます。

左のメニューから「コンテンツ」→「サイトの速度」→「サマリー」もしくは、「ページ速度」と進みます。
※「レポート全体を見る」でより詳細なデータを見ることができます。

「サマリー」では、サンプルとしてチョイスされた数ページの平均表示時間やブラウザ別の平均表示時間などが確認できます。

Googleアナリティクスでページの表示速度を確認する方法。サマリー編

「ページ速度」では、各ページごとの平均表示時間などが確認できます。

Googleアナリティクスでページの表示速度を確認する方法。ページ速度編

こちらもどれくらいの精度での計測かわかりませんので、あくまでも参考程度として考えましょう。

Webページの読み込み時間による影響
Googleの調査によると、Webページの読み込みが0.5秒遅くなると検索数が20%減少する。

Amazonの調査によると、Webページの読み込みが0.1秒遅くなると売り上げが1%減少する。

こんなデータも出ているようですが、実際に、Webページの読み込み時間がどれほどWebサイトに影響するかは細かく調査しないとわかりません。しかし、表示速度が速くなることによるデメリットはないと思いますので、まずは、自分のWebサイトの現状を把握しておきましょう。

そして次回は、このページの読み込み時間を改善する方法についてお話ししたいと思います。

実は、このブログもこの方法で改善するまでは、表示時間15秒超えだったのです…。
それでは、次回をお楽しみに!

今回も、最後まで読んでいただき、ありがとうございます!


Posted in SEO, Webサイト制作, 便利ツール, 内部対策SEO | Leave a comment

タイトルタグの変更はSEO的に絶対にダメと言われているので試しました

この記事を読むのに必要な時間:02分36秒

Webサイトのタイトルタグの変更… これは、絶対にやってはいけないとよく聞きます。

タイトルタグを変えてはいけない理由とは?
このタイトルタグは、SEOの内部対策で超重要とされています。
タイトルにキーワードを含めるだけで、上位に表示されることもあるくらい、タイトルタグは重要な要因なのです。

タイトルを変えてはいけない = タイトルを変更すると検索順位が下がるということですが、実際のところどうなのでしょうか?

タイトルタグを変えたい理由
そもそもタイトルを変えたいときってどんなときでしょうか?

1. 意図しないキーワードで上位表示されていて、タイトルにそのキーワードを含めればもっと上位に表示されるかもしれない

2. あまり深く考えずにタイトルを決めてしまったページが上位表示され、タイトルを変えればクリック率が上がるかもしれない

3. ページの内容を変えたいのでタイトルも変えたい


まず、3については、ページの内容を変えるのであれば、タイトルももちろん変えるべきです。

「タイトルタグに上位表示させたいキーワードを入れる。」これは確実にやるべきSEO対策です。
もちろん、そのページコンテンツが上位表示させたいキーワードについて書かれていることが前提です。

逆に、タイトルに狙っているキーワードが含まれていない場合、そのキーワードで上位表示させるのはとても困難です。

問題は、1と2ですが、僕は変えるべきだと思います。

1の場合、上記の説明とちょっと矛盾しているかもしれませんが、ビッグキーワードでなければ、コンテンツの内容によっては意図しないキーワードで上位表示されることもあります。

ですので、タイトルにそのキーワードを含めることによって、良い結果が出ることが大いに期待できます。

2の場合も同様です。

大事なのは、コンテンツとタイトルが合致していることです。

例えば、タイトルにAというキーワードを入れていて、Aと検索した際に上位表示されていたものをBというキーワードに変更した場合、Aと検索した際の検索順位が下がるのは当然です。

タイトルタグとコンテンツの内容が違うとどうなるかを説明したイラスト

実際にタイトルタグを変更
というわけで、すでに上位表示されているページのタイトルを変えてみました。
今回変更したのは、2のパターンです。

【◯◯とは?】
という素っ気ないタイトルだったのですが、『◯◯』というキーワードで7位、『◯◯とは』で5位に表示されていました。

Googleアナリティクスで確認したところ、『◯◯ メリット』というキーワードでも上位表示されていたので、【◯◯とは?】の後半にメリットというキーワードを含めた文章を追加してみました。(本当のタイトルはもっとクリック率を意識したものです。)

1ヶ月以上経過した結果がこちらです。(※クリックで拡大できます。)

タイトルタグを変更した後の検索結果 その1

タイトルタグを変更した後の検索結果 その2

『◯◯』『◯◯とは』ともに検索順位は上がり、追加した『◯◯ メリット』でも順調に上昇中です。

SEO対策に正解はありません。
正確に言うと、この対策をすれば100%上位表示すると言い切れる対策はありません。

というのも、検索エンジンはいくつものアルゴリズム(検索エンジンが検索順位を決定するためのルールのようなもの)を持っていて、そのアルゴリズムは常に改良されています。
ちなみに今年は、ペンギンアップデートとパンダアップデートという2つの大きなアルゴリズム変更がありました。

SEOに正解はない良い例として、タイトルを変更して検索順位が下がったという話も聞いています。

大事なのは、自分で実践してみることです。

自分で実践することによって、今回のタイトルタグのケースで言うと、これくらいのキーワードでこれくらいの変更なら問題ないんだなと感覚的に覚えることができます。

書籍やセミナーだけの知識だと、「タイトルは絶対に変えてはいけない」とか「メタキーワードは今のSEOでは重要視されていないらしいから空欄にしておこう」などと近視眼的になりがちです。

では今日のまとめです。

今日のまとめ
タイトルタグは絶対に変更してはいけないということはありません。

ただ、SEO対策に正解はありません。
タイトルタグを変更しても絶対に検索順位が下がらないなんてことはなく、キーワードの難易度やその他の要因が加味されることによって順位が下降するケースもあります。

実際にいろいろと試してみることによって、精度の高い判断ができるようになります。



最後まで読んでいただき、ありがとうございます!


Posted in SEO, 内部対策SEO | Tagged | 2 Comments

サイトマップとは?サイトマップ作成に役立つ2つのポイント

この記事を読むのに必要な時間:01分55秒

いくら素晴らしいサイトを作っても誰にも見られることがなかったらこの世に存在しないサイトと同じです。
以前にクローラビリティについてお話ししましたが、今回はもう少し突っ込んだお話しです。

クローラーにインデックスされていないサイトは…
多くの人たちに見てもらうためには、まずクローラーにインデックス(認識)してもらうことが重要です。

検索エンジンの検索窓に直接URLを入力して、検索結果に出てこない場合、そのページは検索エンジンにインデックスされていません。つまり、どんなキーワードで検索しても絶対に検索結果に出てこない状態なのです。

ページがGoogleにインデックスされていないので検索結果に出ない状態
そこで、クローラビリティ向上のために活用して欲しいのが、サイトマップです。

サイトマップとは

サイトマップとは…
Webサイト内のページ構成を一覧できるようにした案内ページのこと。本の目次みたいなものです。
サイト内で迷子になったり、目的の情報が見つけられないユーザーのためのコンテンツ一覧です。


サイトマップは、2種類あり、ひとつはhtmlページで作るユーザーのためのサイトマップ。
そしてもうひとつは、xmlで作るクローラー用のサイトマップです。

tmlで作成したサイトマップの一例※htmlページで作成したサイトマップ例 クリックで拡大

xmlで作成したサイトマップの一例※xmlページで作成したサイトマップ例 クリックで拡大

ユーザーのためと書きましたが、クローラーはhtmlのサイトマップも利用することがあるので、ふたつとも用意しましょう。

htmlサイトマップの作りかた
htmlのサイトマップは、通常のWebページと同じように作成します。
基本的には、すべてのページへのリンクを貼りますが、ページ数が膨大な場合は、主要なページヘリンクするか、サイトマップを数ページ作ります。

ページ作成後は、サーバーのルートディレクトリ(一番上の階層)にアップロードします。(アップロードするディレクトリはどこでも構いませんが、ルートディレクトリで良いと思います。)

xmlサイトマップの作りかた
xmlのサイトマップは少し複雑です。
ただ、「サイトマップ ツール」で検索すると、無料でxmlのサイトマップを作成してくれるツールがたくさん出てきます。

こちらも作成後は、サーバーのルートディレクトリ(一番上の階層)にアップロードします。

また、xmlで作ったサイトマップは、Googleウェブマスターツールを使ってGoogleに送信することができるので忘れずに。

Googleウェブマスターツールにサイトマップを登録する手順

クローラーにとって最適な=SEOに効果的なサイトマップとは?
それは、Googleが答えてくれています。

SEOに効果的なサイトマップとは…

1. リンク切れなどをチェックし、常に最新の状態にしておく。
2. ただ単にリンクを並べるだけではなく、カテゴリやジャンルで整理する。


サイトマップは、まずユーザビリティを考え、ユーザーが迷子にならないようなページを心がけましょう。
また、いくらページ数が少ないサイトでも、サイトマップは用意した方がいいです。あとになって作るのは大変ですし、ページ数が少ないというのも自分の判断でしかないですからね。

今日のまとめ
ユーザビリティ、クローラビリティ向上のためにサイトマップ(sitemap.html)を、クローラビリティ向上のために、クローラー専用のサイトマップ(sitemap.xml)も用意しましょう。

ただ、思考のベクトルが、クローラーやSEOだけに向いてしまうと、本末転倒です。
あくまでもユーザー目線のサイト制作を。



今日は、以上です。
ありがとうございました。


Posted in SEO, ウェブマスターツール, 内部対策SEO | Tagged , | Leave a comment