2011.06.23SEO記事一覧

隠しテキスト・隠しリンク

  • このエントリーをはてなブックマークに追加

この記事をご覧いただいている皆様へ。
このページは、SEO情報ブログ「ディーエムソリューションズの社員が作った、【SEOまとめ】」にて公開されていた記事であり、2014年12月にデジタルマーケティング研究所へ統合されました。

search-engine-optimization

隠しテキスト・隠しリンクとは、スタイルシートやstyle属性を使ってHTMLソース上のテキストをブラウザで非表示にする方法です。中にはホームページ制作会社の間では一般的なテクニックとなっているケースも多く、意図せずにスパム行為と認識されることの無いようコーダーの方などには是非知っておいていただきたいポイントです。

display: none;、visibility: hidden;、text-indent: -9999px;などを指定する方法

最も代表的、かつ露骨な隠しテキストです。

HTMLソースコード

<p style=”display: none;”>テキスト</p>
<a style=”visibility: hidden;”>リンク</a>

もちろんCSSに外部化した場合も同様です。(検索エンジンはスタイルシートの中身も見ています。)

文字の色を背景色と同色とする方法

これも検索エンジンは看破します。

HTMLソースコード

<p style=”backgound-color: #ffffff;”><font color=”#fffff”>テキスト</font></p>
<a style=”backgound-color: #000000;””><font color=”#000000″>リンク</font></a>

もちろんCSSに外部化した場合も同様です。

<noscript>を使用する方法

scriptがオフになっている場合の代替テキストを記載したいだけなら問題有りませんが、SEO目的でテキストを挿入するとスパムとなります。そもそも<noscript>内に大量のテキストやリンクを挿入する必要の無いようにHTMLソースコードの構造を設計しましょう。

HTMLソースコード

<noscript>
<p>テキスト</p>
<a>リンク</a>
</noscript>

画像置換(text-indent: -9999px;やoverflow: hidden;)

WEB制作の業界ではナビゲーションボタンなどのロールオーバーに画像置換を用いるのはわりと一般的なテクニックとして知られています。

ところがこの画像置換、<a>タグに対してtext-indent: -9999px;やoverflow: hidden;を同時に指定することになるため隠しリンクとしてマイナス評価を受ける(もしくはサイト内リンクとして評価されない)可能性があるんです。

そこで、画像置換を使わずにロールオーバさせる方法を紹介します。

HTMLソースコード(HTML4.01もしくはHTML5の場合の例)

<div class=”rollover”>
<a><img src=”btn.jpg” width=”XXX” height=”YYY” alt=”代替テキスト”></a>
</div>

スタイルシート(CSS)

.rollover {
background: url(btn-on.jpg) no-repeat;
width: XXXpx;
height: YYYpx;
}
.rollover a {
display: block;
}
.rollover a:hover {
background: none;
}
.rollover a:hover img {
visibility: hidden;
}

ロールオーバーやアコーディオンメニューなど、ユーザーのために適用したはずのデザインもGoogleはスパム行為とみなしてしまう可能性があるので注意が必要です。

最短で1ヶ月間のインデックス削除!隠しテキストに対するペナルティ

隠しテキスト・隠しリンクを悪質なものとみなされた場合、最短でも1ヶ月間のインデックス削除を受けるケースがあります。
詳しくは隠しテキスト・隠しリンクに対するペナルティをご覧ください。
 
【次のページ】アンカーテキストペナルティ »

 

  • このエントリーをはてなブックマークに追加
The following two tabs change content below.
片川 創太

片川 創太

2014年12月までディーエムソリューションズ株式会社SEO対策チームに所属。「SEOは実装」を信条に、コミュニケーションを重視するスタイルで数多くのサイトのコンサルティングを手がける。内部施策に関して造詣が深く、「SEOまとめ」というtwitterアカウントを通じて日々情報発信を続けている。 Twitter: SEOまとめ