画像をパクられないための直リンク対策のハウツー
ブログにいろいろな写真を載せているとたまにパクられるときがあります。
いままでは「別にいーよ」と思っていましたが気が変わりました。
画像をパクられないようにカツカツに直リンク対策を行いました。
当サイトは Xserverドメイン
で WordPress ＋ Cocoon で構築してます。どのような対策を施したのか具体的に紹介します。
はじめに
技術的に直リンクを禁止するハウツーと防止するメリット・デメリットを解説します。
ここで紹介するハウツーは .htaccess や style.css を編集するため初心者向けではありません。
安全・お手軽に直リンク対策だけをしたいひとは、「プラグイン 直リンク WordPress」で検索するとみつかります。
直リンクとは？
他サイトの画像ファイルを参照して表示する行為をいいます。
ファイルじゃなくて記事のアドレスをリンクするのは直リンクとは言いません。
意図的でなくても画像アドレスをコピーして自分のブログに貼り付けて表示させたら直リンク。
たとえば、ソースを見たとき
<img src="誰かのサーバ/image.jpg">
のように自分以外のサーバを指定している画像ファイルは直リンクなのです。
出典写真：wporep
ありがちなのが、こんな感じで写真元サイトを書いているケース。出典、引用と書いても直リンク。写真元サイトを書けば良いと思っている風潮もあるけど無断転載の行為です。
現在は消滅したNAVERまとめのようなキュレーションサイト（まとめサイト）がよくやっていた、テキストだけを書いて他人のサーバなどからいい写真をかき集めてアクセスを稼ぎ、収益をあげていた手法です。
じゃあ画像をダウンロードして自分のサイトにアップすればいいのかな？
もっとダメ！著作権侵害という罪になります。
直リンクしてもセーフなのは？
- ブログカードの写真
WordPressでサイトのリンクを記述するとブログカードのアイキャッチ画像ができます。
相手サーバの画像を表示するので直リンクっぽいですがこれはセーフです。 - アフェリエイトリンクの写真
アマゾンや楽天などのアフェリエイトリンクを貼ると商品の画像が表示されますがセーフです。
これはパッケージ変更などのときにサーバの画像を変えれば、リンクしている全員の画像を一気に差し替えられるからです。 - 自分のサイト
複数のサイトを運用していて写真を使い回しするのはセーフ。 - 許可どりオッケー
写真のサイトへDMなどで出典・引用の許可取りをしてOKをもらえばセーフ。
直リンクされるデメリット
画像を直リンクされた場合のデメリットを考察してみます。
サーバに負荷がかかる
あなたのサーバ上の画像ファイルが直リンクされると、どこかから画像をクレと言われたら、はいはいと届けることになります。つまり知らない誰かのためにサーバがタダで働いています。
ですが、数枚程度なら言うほどサーバに負荷がある気がしません。
どう使われているか判らない
直リンクされた写真が意図しない使われ方をするケースがあります。
同じ写真でも文章によって受け手の印象が大きく変わります。
無断使用されてこちらの思いと違う使われ方をされているときもあります。
日米友好祭で撮影したオスプレイの写真です。
文章が変わるとイメージがぜんぜん違ってきませんか？
友好祭のギャラリーにお辞儀する CV-22オスプレイ
住宅地を低空飛行で騒音をまき散らす米軍のオスプレイ
なんとなく気分が悪い
いろいろと考えてみたけど結局は「勝手に使われて気分が悪い」に落ち着きます。
さらに直リンクされた先がアフェリエイトや広告収入をしていて写真が相手の収入源になっていると思うとさらに気分が悪くなるのが心情です。
直リンクがなぜ嫌なのか考察してみるとこれという直接的なデメリットはないけど、なんとなく気分が悪くイライラしちゃうのがデメリットかもしれません。
直リンク排除マンが誕生した理由
今までは直リンクを見つけても放置していました。トラフィックが高いわけじゃないし、別にいいいよと思っていたけど気が変わった。
それば広告に強制的に誘導する詐欺まがいのサイトに使われていることを知ったから。
ゆるさん!!!
早速、直リンク対策に取り掛かります。
俺の直リンク対策のハウツー
一度、設定したら恒久的に効果が持続する直リンクを禁止する対策を紹介します。
当サイトは Xserverドメインで運用して WordPress + Cocoon で構築しています。
この環境での説明ですが他の環境でも同じように定義できるはずです。
直リンク対策する３つの魔法のハウツーです。
魔法の習得にトレーニングは不要、コピペするだけでマスターになれます。
第１の魔法「直アドレスを知られ難く」
第２の魔法「知られても表示させない」
第３の魔法「う◯この画像にすりかえる」
このハウツーはブログのすべての画像に適用されます。
１枚だけや特定のページだけ禁止することはできません。個別に指定する方法もあるので調べてみてください。
防御的な直リンク対策
そもそも直リンクされちゃうのは画像のアドレスが判っちゃうから。
ブラウザで画像を右クリックや長押しで画像のアドレスをコピペされることで直リンクされます。つまり右クリックや長押しさないようにすれば防御できます。
第１の魔法 画像アドレスを知られ難くする
CSSスタイルシートに以下の定義をするとマウスでの右クリックやスマホの長押しなどのアクションを無効にできます。「右クリックして画像のアドレスをコピー」を表示させない防御魔法です。
Cocoon Child: style.css を編集します。
外観＞テーマエディター＞ style.css
WordPress 5.8.3 + Cocoon 2.3.9 では「何かうまくいかなかったようです。」と表示されて編集できませんでした。付随の CSS エディター でも編集できなかったので style.css を FTP でアップロードしました。
img {
-touch-callout:none; ' 依存なし
-user-select:none;
-webkit-touch-callout:none; ' ChromeとSafari
-webkit-user-select:none;
-moz-touch-callout:none; ' FireFox
-moz-user-select:none;
}
意味をざっくり説明すると img （画像）へのアクション（右クリックとか）を無視させる記述です。ブラウザごとに指定しています。さらに img を body にすると文章もコピペできないようになります。
でもこの魔法の防御は低い。
「画像 右クリックできない」で検索されるとあっけなく破られる反撃呪文がみつかっちゃいます。
- CSSを無効
- JavaScriptを無効
- ソースを表示してテキスト検索
このような反撃にあうと簡単に画像アドレスがバレます。
大概のひとは「あー、めんどくさ、他探そ」となりますが絶対使いたいマンには効果がありません。
第２の魔法 知られても表示させない
第二の魔法は強力、俺サイト以外には画像を見せません。
.haccess を設定することで直リンクをすべて撥ねつけることができる最強の結界魔法です。
設定するには?
- エックスサーバー
だとサーバーパネルの ホームページ＞.htaccess を選びます。
- .htaccess編集を選びます。
- 既に記述してある最後に追加する
追加する呪文がコチラ
コピペして２行目をあなたのサーバに書き換えてください。
記述するときは . の前に \ を入れる必要があります。
例えば、ブログのアドレスが www.myblog.co.jp/watashi/ ならば、
SetEnvIf Referer "^http(s)?://www/.myblog/.co/.jp/watashi/" OK となります。
SetEnvIf Referer "^http(s)?://あなたのサーバ\.com/" OK
SetEnvIf Referer "^$" OK
# 許可する検索エンジン
SetEnvIf Referer "google" OK
SetEnvIf Referer "yahoo" OK
SetEnvIf Referer "bing" OK
SetEnvIf User-Agent "^Googlebot.*$" OK
SetEnvIf User-Agent "^pinterest.*$" OK
SetEnvIf User-Agent "^Twitterbot.*$" OK
order deny,allow
deny from all
allow from env=OK
</Files>
.htaccessに設定すると ──
うっひょー！直リンクしてるサイトの画像は全滅で最高の結末！やったぜ！
ところが、魔法の効果が効き過ぎて何も定義しないとグーグルにも表示しないじゃん！！となる。
ヤフーやBingなど検索エンジンまで全滅します。
SEO やインデックスを気にしているひとは注意深く、手加減した設定が必要。
検索エンジンやクローラーは、魔法の対象外にしないと検索順位が駄々落ちするので魔法の取説を読んでください。
魔法の取説①「検索エンジンは除外する」
Referer で許可する検索エンジンを定義してください。サンプルでは Google、Yahoo、bing を許可しています。インデックスクローラーは User-Agent で許可します。
サンプルではGoogleクローラー、ピンタレスト、ツイッターを許可しています。他のクローラーを許可するときは行を増やして追加します。
魔法の取説②「直アドレスは表示させてる」
３行目 SetEnvIf Referer "^$" OK は画像アドレスをブラウザで直接、表示させるときの許可です。
利便性のために許可していますが、絶対ダウンロードさせないモン！なひとは消してください。
魔法の取説③「ZIPファイルもダメにしたい」
１行目<Files ~ "\.(jpg|jpeg|png|pdf|gif|svg|mov)$"> に拡張子を追加します。
第３の魔法 攻撃的な直リンク対策最強の魔法！
オフェンシブな防御呪文を唱えるウイザードをみつけました。その御仁の対策とは…。
う◯この画像に差し替えちゃう
マジかよ、嘘みたいな技術だけど自サイト以外からの画像の呼び出しには差し替えた画像（う◯こ）を表示させるという方法。強いッッッ！なんという破壊力のある攻撃、痺れるゥ。
興味のあるひとはぜひ👇
直リンク防止のハウツーのまとめ
直リンクを防止するいくつかのハウツーを紹介しました。
画像が狙われたときに、簡単に直リンクできないと他を探そうとなることがほとんどです。さらに第２の魔法で結界を貼れば直リンクは完全に撲滅できます。
それでもどうしてもパクりたい人はスクショで保存したり、コピーライトやウォーターマークをいれてもトリミングをされたり、フォトショップでコンじられることもあります。
画像をパクッてアップロードして使うと著作権侵害という罪になることがあるのに、どうしたって使われるものは使われちゃいます。
バレばきゃいいじゃん？と思っても
COPYTRACKという無断転載された画像を発見&管理してくれるサービスがあります。
かなりゴリゴリにネットから不正コピー画像を調べ上げてくれて、さらに無料で賠償請求を代行してくれて代金は成功報酬から差し引くという神サービスをしてる。
対象は、不正使用されているページが商用と判断される場合のみ。プライベートユーザーによるブログや Facebook のプロフィール写真などは対象外です。
