カテゴリ : WEB制作

去る2012年7月18日に、GoogleがPandaアップデートを日本語と韓国語に対応してからというもの、オリジナリティのあるコンテンツを提供できるWebマスターは長年の溜飲が下り、無断でコンテンツをコピーしていたWebマスターには天罰が下るといったことが日常的に起きるようになりました。

これは素晴らしいことであると実感する一方で、このブログでもガジェット関連の記事を書く際に、他のサイトから情報収集した内容を掲載することもあるので、我が身を振り返って本当に大丈夫かどうか、少し不安になりましたので、コピーサイトとはどこまでのことを指し示すのか考察してみました。


Googleはなんと定義している?

GoogleのWebマスターツールではコピーサイトについて以下のように定義しています。
無断複製されたコンテンツの例としては、次のようなものが挙げられます:
  • 他のサイトのコンテンツをコピーし、独自のコンテンツや付加価値を加えることなく転載しているサイト
  • 他のサイトのコンテンツをコピーし、(語句を類義語に置き換えたり自動化された手法を使用したりして)若干の修正を加えた上で転載しているサイト
  • 何らかの独自の体系付けやユーザーへの利便性を提供することなく他のサイトからのコンテンツ フィードをそのまま掲載しているサイト
Googleウェブマスターツール:無断複製されたコンテンツ
ふむ、まるっきりコピーをしてはならないということでもなさそうですが、重要なところは『付加価値を付けずにコピーする』というところでしょう。
また、2番目の『自動化された手法』のリンク先を見てみると、”自動化されたツールで翻訳されたテキストが人間によるチェックや管理を経ず公開されたもの”という記述がありますが、ここから窺えることは、Googleのアルゴリズムは、きちんと人の手によって翻訳されているかどうかまでチェックしているということです。スマホ・タブレットの最新情報はどうしても海外の方が耳が早かったりしますので、このブログでも度々海外のサイトから仕入れた情報を元に記事を書くことがあるので、実はかなり気にしていたところではあります。一応わからない単語や熟語を調べることはあっても、原文丸々をエキサイト先生に翻訳依頼してそれをそのまま掲載するということはしていないので、問題ないと判断しています。

Googleのいうところの『付加価値』を考える

Googleはコピーがまるっきりだめなのではなく、付加価値が無いのが駄目なのだと言っていると理解していますが、それではGoogleが認める付加価値とはいったい何ぞや?ということを考えていきます。

 まずは質という観点から。どれだけのクオリティを誇ればGoogle先生に花丸をいただけるかということですが、明確な基準が無いので正直わかりません。が、Google先生はヒントを残してくださっています。以前にこのブログでも紹介しましたが、Pandaアップデートに伴い、良質なサイトについて明言しています。

Googleウェブマスター向け公式ブログ:良質なサイトを作るためのアドバイス

Google先生に「いいね!」と言わしめたら、それはもう充分な付加価値を提供していると見て間違いないでしょう。特に以下の点を反芻してみるといいでしょう(もちろん全部大事ですが)。
  • この記事は独自のコンテンツや情報、レポート、研究、分析などを提供しているか?
  • 同じ検索結果で表示される他のページと比較して、はっきりした価値を持っているか?
  • 記事はしっかりと編集されているか? それとも急いで雑に作成されたものではないか?
  • 記事が、あたりまえのことだけでなく、洞察に富んだ分析や興味深い情報を含んでいるか?
  • 記事が短い、内容が薄い、または役立つ具体的な内容がない、といったものではないか?
記事の内容を引用するにしても、自分なりの所感や分析を入れ、それが読む人にとって役立つ情報となり、文脈がめちゃくちゃになっていない読みやすい文章で、わかりきったことばかり書かず、おっと目を引くような発見があり、決して淡白ではなく、読む人の血肉になるような、そんな記事を私は書きたい。ということですね。

 続いて量という観点。いくら付加価値を付けたといっても、全体の1割にも満たないものであれば、それはオリジナルのコンテンツとしては認められないでしょう。
これまた明確な基準は無いみたいなので、主観的な話になってしまいますが、Webマスターは自分のサイトがコピーされていると感じたら、Googleに対してスパムサイトとして報告できたり、異議申し立て(デジタル ミレニアム著作権法)を行うことが出来ます。
そのときに、もし自分がやられて思わずGoogle先生に言いつけたくなるレベルのコピーの程度はどれくらいか考えてみたところ、全体の半分以上コピーされているときかなぁ。と思いました。4割くらいなら「まあ似たような記事を取り扱ってたら、似たような文章の構成になったりすることもあるわな。」と思えるレベルじゃないでしょうか。

 最後に、ここで書いた内容は自分の主観が大いに入っていますし、これまでの記事でも、僕自身はOKだと思っていたことが、端から見たら明らかにNGであるということも絶対にないと言い切れません。もしこのブログを見てくれている方で、認識違いをしていると思われた方は、是非ご指摘いただきたく存じます。


「WEBディレクターの~」なんて副題を付けておきながら、ガジェット関連の記事ばっかりになっていたので、ここらでちょっとWEB制作関連も書いておきます。

最近とみに増えてきた固定メニューですが、中でもTOPへのアンカーリンクボタンや、Twitterボタン、FacaBookボタンなどのアイコンが一まとまりになったボタンをよく目にします。固定オブジェクトは便利ですが、あまり多用してあちこちに散りばめられるのは見栄えも悪いし何とかしたいと考えていたので、このブログでも取り入れてみました。

icon_ggt
といっても特に目新しいことはしておらず、スタイルシートで固定の枠を作り、その上に各々のアイコンボタンを乗せているというシンプルな仕様です。まずは固定の枠のスタイルを作っていきます。

.icon_box_bk{
         background:#f5f5f5;
           border:1px solid #CCC;
         border-radius: 6px;
         width:50px;
         height:300px
         -webkit-box-shadow: 0 5px 10px #aaa;
         -moz-box-shadow: 0 5px 10px #aaa;
          box-shadow: 0 5px 10px #aaa;;
         position: fixed;
         top:200px;
         right: 20px;
}
背景色を薄い灰色にして、角に丸みを帯びさせたボックスを作成し、ブラウザの上辺から200px、右辺から20pxの位置に固定しています。

次に、ボタンのスタイルを作成していきます。
.icon_box{
          border-bottom:1px solid #CCC;
}
.icon_box a{
          display:block;
          padding:11px 9px;
          height:30px;
          vartical-align:middle;
          text-decoration:none;
          color:#333;
          filter: alpha(style=0; opacity=75);
          -moz-opacity: 0.75;
          opacity: 0.75;
}
.icon_box a:hover{
          filter: alpha(style=0; opacity=100);
          -moz-opacity: 1.00;
          opacity: 1.00;
}
一つのアイコンのクリック領域を縦50×横50ピクセルくらいに想定して、パッディングでアイコン位置を調整しています。ここのスタイルシートの記述はあまり美しくないので、参考にならないかもしれません。
オンマウス(hover)時にクリッカブルであることを目立たせるために、filter、-moz-opacity、opacityという透過のプロパティを使って通常時は75%の不透明度(変な表現ですが)で表示し、オンマウス時に100%にしています。
因みにfilterがIE向けのプロパティで、-moz-opacityがMozzila向け、opacityがOpera・Safari向けのプロパティの記述です。数値が小さくなればなるほど背景を透過します。

あとは、HTMLに記述を行います。
<div class="icon_box_bk">
  <div class="icon_box">
    <a href="#top">
     <img src="http://degi.doorblog.jp/img/up_arrow.png" border="0" />
    </a>
  </div>
  <div class="icon_box">
    <a href="https://twitter.com/dgfctn" target="_blank">
     <img src="http://degi.doorblog.jp/img/tw.png" border="0" />
    </a>
  </div>
  <div class="icon_box">
    <a href="http://www.facebook.com/dgfctn" target="_blank">
     <img src="http://degi.doorblog.jp/img/fb.png" border="0" />
    </a>
  </div>
 <div class="icon_box_btm">
    <a href="http://degi.doorblog.jp/atom.xml" target="_blank">
     <img src="http://degi.doorblog.jp/img/rss_feed.png" border="0" />
    </a>
  </div>
</div>
ひとまず、これでボックスの実装自体は完了です。スタイルシートだけで簡潔するので、導入のハードルはそこなで高くないと思います。サンプルを記載しておくのでご自由にご利用いただければと思います。

アイコンボックスサンプルページ


Googleが2012年4月下旬に実施した検索エンジンのアップデート(通称ペンギンアップデート)によって、いわゆる小手先のSEO施策は通用しなくなり、とりわけ悪質なサイト(スパムサイト)からバックリンクを受けている場合は、サイトの順位に悪い方向に大きく影響を受けるようになりました。このアップデートによってスパムを使って無理やり上位表示を行ってたサイトが姿を消すことになったので、検索結果の健全性が高い水準で守られるようになりましたが、その反面で困ったことも起きていました。

この新しいアルゴリズムを逆手にとって、競合サイトの妨害を行うものが出てきたり、今まで影響が無かったため放置していたバックリンクが突如として悪影響をもたらすようになったが対抗手段がないといった事態が発生していました。

その救済処置として「リンク無効化ツール」をリリースしたとの告知が、WEBマーケティング関連の巨大イベント「PubCon(パブコン)」にて行われました。リンク無効化ツールはすでにウェブマスターツール上で公開されています。

link
赤いボタンを押すと、以下の画面に遷移します。

link2


非承認にしたいリンクの登録については非常に簡単で、テキストファイル上に、一行ずつ非承認にしたいリンクを書いていくか、”domain:degi.doorblog.jp”といったように書いてドメインごと非承認にするように指定するかして、そのテキストファイルをアップロードするだけでOKです。ファイルサイズの上限は2MBとのことですが、正味テキストファイルで2MB分って相当な量なので、そこまで行くことはほぼ無いでしょうし、そんなサイトならいっそのこと作り変えたほうが手っ取り早い気もします。非承認リストの記入例を一応記載しておきますので、ご参照ください。
# degi.doorblog.jp のオーナーに 2012 年 ○ 月 ○ 日にリンクの削除を依頼。しかし返事が得られなかった。
domain:degi.doorblog.jp
# degi.doorblog.jp のオーナーはほとんどのリンクの削除に応じてくれたが、一部削除できていないリンクが残っている。以下がその一覧。
http://degi.doorblog.jp/sample1.html
http://degi.doorblog.jp/sample2.html
http://degi.doorblog.jp/sample3.html
※文頭に#がつく場合はコメント扱いになるので無視されます。

詳しい情報は
Googleウェブマスター向け公式ブログ
をご参照いただければと思います。

個人的に小手先のSEOに走る前に、コンテンツを浴するための努力をすべきだと考えていますし、良質なコンテンツ同士の結びつきを大事にしていくことは大いに賛成なのでGoogleの取り組みには大いに賛成です。しかし、知っておかないと憂き目にあってしまうこともありえるのでGoogleのガイドラインはこまめにチェックしておくことをおススメします。