ブログのSEO対策で、内部リンクするといい、とよく言われますが、どこどこに行ってきた、食べてきた、といったブログ記事を、単なるリンクから、地図画像にリンク先をマッピングして、地図内の地域を押すと、そこの記事に飛ぶ、という作りにしたら、ビジュアル的にかっこいいと思いませんか？
今回は、私のブログ内で行っている、東京メトロスタンプラリーの各駅の記事を、路線図から飛ばす記事を参考に、手順をまとめてみましたので、参考にしてみてください。
かんたんにマッピングするHTMLコードを生成できるサイトの紹介と基本的な使い方
地図マッピングのHTMLソースコードを自力でゴリゴリ組むのは、WEBプログラマーでも至難の業。そんな難易度高のプログラムを自動生成してくれるサイトがあります。
Free Omline Image Map Generator（以下マップジェネレーター）というサイトで、任意の画像に、リンクする領域を決め、そこにリンクしたい記事のURLを割り当てることで、プログラムを自動生成してくれるという、なんともありがたいサイトです！
このサイトでの基本的な使い方をご紹介します。
マッピングする画像の選択
まずはマッピングしたい画像を選択します。私がやっている東京メトロスタンプラリーの記事リンクのため、東京メトロの路線図を題材にしてみます。
Select Image from my PCボタンを押すと、ファイルダイアログが表示されるので、自分のPC内の画像を選択します。
マッピングする領域の指定
次にマッピングする領域の指定です。指定方法にはRect（矩形）、Poly（任意）、Circle（円形）の３つの方法があります。
Rect（矩形） 指定
２点を指定して、四角形の領域を指定する方法です。まず１点目をマウスポインタで指定して、
２点目を指定すると、四角形の領域ができます。
Poly（任意） 指定
任意の点を指定して、画像に合わせて任意の形に指定する方法です。２点目までは１直線に線が引かれますが、
３点目以降は、各点をつないで、任意の形にしていきます。
Circle（円形） 指定
最後は円形指定です。１点目は円の中心。２点目を指定すると、１点目、２点目の間を半径とした円形が作られます。
リンク先、ツールチップ文言、リンク先表示方法の指定
次に、リンク先のURLを「Link」へ、マウスカーソルを置くと表示されるツールチップ文言を「Title」に、リンクを押した後のリンク先記事の表示方法を「Target」に指定します。
ここでは代々木公園駅の記事を貼ってみます。Linkに代々木公園駅の記事のURL、Titleに「代々木公園」、Targetは、リンク先を別のタブで開く「_blank」を指定します。Target指定は他に３つありますが、基本 _blank で大丈夫です。
できあがりのイメージはこんな感じです。代々木公園駅にカーソルを合わせると、「代々木公園」のツールチップが表示され、押すと記事に飛ぶようになります。
HTMLソースコード生成
Show Me The Code!ボタンを押すと、ソースコードが自動生成され、以下のように表示されます。
ブログ記事への貼り付け
次に出来上がったコードを、ブログ記事に貼り付けます。が、このまま張り付けたのでは、ブログに表示されません！画像の保存先が違うためです。img src=”画像ファイル名”の部分を、自分のブログの画像保存先に変更します。
思った場所にリンクが貼れない！座標軸のあわせかた
ここまでやってみて、一発でうまくいったら儲けものなのですが、私がハマッたのは、指定したと思った場所にいくらカーソルをもっていっても、うんともすんともいわない、という現象です。
その場合は画像のサイズと、指定した座標軸がずれていることから、あさっての方向にリンクが貼られてしまっています。
まずは矩形指定で、画像のサイズと生成コードの座標確認
原始的な方法ですが、自分が指定した座標は、画像でいうとどの辺を指しているのか、大まかに矩形指定してみて測ってみる方法です。
下のように「市ヶ谷」あたりまで設定してみたとします。
実際ブログに貼ってみて、プレビューしてみると、実際は「二重橋前」付近までリンクされていることに！
画像のサイズを変更し再チャレンジ
ここからは地道な作業です。座標軸のずれは、倍くらいありそうなので、画像サイズを今のサイズから半分にしてみて、最初からやりなおしてみました。
するとピッタリ一致！
ソースコードを作りこむ前に、座標軸の合わせ作業を先にすることをオススメします。作り切ってから、まったく合っていなかった！となると悲しい出来事になります。。。
まとめ
ブログ記事を相互リンクするのに、マッピング技術を使って地図画像から飛ばすのは、見た目にもかっこよく、内部リンクを貼ることでのSEO対策も効果的です。是非チャレンジしてみてください！まずは座標軸合わせが肝心！
今回は「SEO対策ブログ内部リンクをかっこよく！地図からブログ記事にジャンプするテクニック教えます」をお送りしました。
コメント