コピペで記事を転載する人に全く違う内容のテキストをコピーさせる方法 ※

昨日、Twitterが行っている、心遣いの方法を読みました。

省略したＵＲＬをコピペしても完全なＵＲＬとして貼り付けられるようにするTwitterの心遣いがすごい - Qiita

これを、コピペすると、こうなる。・・・・・・なんでそんなことが起こるのかと色々考えたけど、調べてみると結局はTwitterの心遣いだった。い・・・invisible！！！いんびずぃぼぅ！！…

qiita.com

これを見て、「へぇ、そんな使い方ができるんだ」と思ったとともに、何か他に使えないかと考えてみました。

Twitter上で短縮URLをコピーすると

例えば、以下のツイートがあったとします。

デバイスの画面サイズ表 Device Metrics – Google Design https://t.co/49KstofOLi
— わいひら@寝ログ (@MrYhira) 2015, 6月 24

Twitter上で、短縮URLを以下のようにコピーして、

エディターなどに貼り付けると、以下のようになると思いきや、

デバイスの画面サイズ表
Device Metrics - Google Design
google.com/design/tool/de…

（※見やすいように改行は、こちらで入れました）

ちゃんと、全てのURLがコピーされます。

デバイスの画面サイズ表
Device Metrics - Google Design
Google Design
Design resources and inspiration from Google — including the Material Design system, Google Fonts, and emerging concepts.
design.google
 …

（※見やすいように改行は、こちらで入れました）

これは、どうなっているのかと、ソースを見てみると以下のようになっています。（※URL部分抜粋のみ）

<a href="">
<span class="invisible">https://www.</span>
<span class="js-display-url">google.com/design/tool/de</span>
<span class="invisible">vices/</span>
<span class="tco-ellipsis">…</span>
</a>

ツイート上に見えているURL部分は、「js-display-url」というクラスで、見えていない部分は、「invisible」というクラスで囲まれています。

このインビジブルクラスのスタイル部分を見てみると、以下のように設定されています。

.invisible {
  font-size: 0;
  line-height: 0;
}

invisibleクラスの文字の大きさをゼロにして、行の高さもゼロにすることで、閲覧者からは見えないようにしているだけみたいです。

このスタイルを適用させた状態で、実際にブラウザで表示させると以下のようになるようです。

デバイスの画面サイズ表

Device Metrics – Google Design
https://www. google.com/design/tool/de vices/ …

Twitterのツイートの中にこんな心遣いが隠されていたんですね。

コピペ対策として使えるは使える

で、ブログで何か使えないかなと考えたら、コピペの転載対策に使えそうかなと思いました。

例えば、こんな感じにタグを書くことで

<span class="invisible">見せないテキスト</span>見せるテキスト

以下のように、コピーしてペーストしたら、全く違ったものになるとか。

今週は以下のDVDを見ました。
ローマの休肝日
オペラ座の怪我人
痛風と共に去りぬ
男はつらいわよ
静かなる壁ドン
読んだ本はこれだけ。
老人と海苔
下こゝろ
鳥人間失格
吾輩は猫耳である
はしょれメロス
やっぱ名作です。

コピペすると、意味が通らない文章になるように使ったり。

問題点

ただ、この方法を使うと、以下のような問題点も。

検索エンジンに隠しテキストとして判断されてしまいペナルティーを食らうかも
正当な使い方をする人が使いにくい
いちいちタグを仕込むのが面倒くさい
挿入するテキストを考えるのも面倒くさい

特に、SEO的に悪影響なのは痛いです。Google公式でも以下のように書いてあります。

Google の検索は隠しテキストが嫌い

以前に Google の検索が好むウェブサイトについての記事を掲載したところ、ウェブマスター向けガイドラインについて様々なお問合せをいただきました。Google では、インターネット上のあらゆるサイトが公平に評価されるよう、個別のお問合せには回答していませんが、今日は特にお問合せの多かった「隠しテキストや隠しリンク...

blog.google