引用タグ(blockquote、q、cite)の使い方について

引用イメージ その他

引用タグについて詳しく調べたことなかったと思い立ち、情報系ブログでは引用は使う場面が多いだろうから今の内に調べておこうと考え備忘録で引用に関してまとめてみました。

スポンサーリンク

引用(blockquote)の使い方

WEBサイトから参照資料としてテキストなどを引用(blockquote)

<blockquote cite="引用元のURL">
<p>引用する内容</p>
引用元:<cite><a href="引用元のURL" target="_blank" rel="noopener">引用元のページのタイトル</a></cite>
</blockquote>

<!-- 使用例 -->
<blockquote cite="https://ja.wikipedia.org/wiki/HyperText_Markup_Language">
<p>HTMLは木構造(入子構造)のマークアップ言語であり、形式言語である。</p>
引用元:<cite><a href="https://ja.wikipedia.org/wiki/HyperText_Markup_Language" target="_blank" rel="noopener">HyperText Markup Language - Wikipedia</a></cite>
</blockquote>

blockquoteタグ外で引用元を記述する場合↓

<blockquote cite="引用元のURL">
<p>引用する内容</p>
<footer>引用元: <cite><a href="引用元のURL" target="_blank" rel="noopener">引用元のページのタイトル</a></cite></footer>
</blockquote>

引用先が著書や有名人の明言などWEBサイトではない場合

<blockquote cite="公式サイトなどURLがあるなら">
<p>引用する内容</p>
引用元:<cite>作者名,作品名</cite>
</blockquote>

blockquoteタグ外で引用元を記述する場合↓

<blockquote cite="公式サイトなどURLがあるなら">
<p>引用する内容</p>
<footer>引用元: <cite>作者名,作品名</cite></footer>
</blockquote>

引用タグ、引用元表記タグについて

長い文章をまとめて引用する時など、まとめて引用する blockquote <blockquote>〜</blockquote>

文章の一部を引用したい時など、一部を引用するqタグ。 <q>〜</q>

<p><q cite="引用元のURL">引用する内容</q></p><cite><a href="引用元のURL" target="_blank" rel="noopener">引用元ページのタイトル</a></cite>

<!-- 使用例 -->
<p>人間にペットして飼われたり、街で見かける野良猫である身近な存在であるイエネコは<q cite="https://ja.wikipedia.org/wiki/%E3%83%8D%E3%82%B3">ヨーロッパヤマネコの亜種とされることもある</q><cite><a href="https://ja.wikipedia.org/wiki/%E3%83%8D%E3%82%B3" target="_blank" rel="noopener">ネコ - Wikipediaより</a></cite>

引用した文章がどこから引用したものであるかを示す、引用元を表記 cite <cite>〜</cite>

タグ参照記事<blockquote>: ブロック引用要素 – HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/blockquote
<q>: 行内引用要素 – HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/q

引用タグを使う意味は?
検索エンジンに対して「この部分は引用です」と伝えるため。

引用タグを使わず、引用部分を『』や “” で囲ったり、他と区別できる見た目にして引用元を書いておく方法もありますが、それとの違いはクローラーに対しても分かりやすくなっているところだと思います。

引用した内容は、他コンテンツでも使われている為に内容は重複している事になる。
そうすると自分のサイトがコピーコンテンツだと誤認される可能性も出てきます。質が悪いサイトだと間違われることを避ける役割、SEO対策としてもblockquoteやciteを使うのは有効みたいです。

引用先ではあるがクロール対象リストから除外した方がいい時

rel=”nofollow” をつける。

<a href="サイトURL" target="_blank" rel="nofollow">〇〇</a>

<!-- noopenerも使う場合 -->
<a href="サイトURL" target="_blank" rel="noopener nofollow">〇〇</a>

nofollowは「nofollowタグが付いてるリンクは辿らなくていいです」と検索エンジンに伝えるのタグ。

〇保証できないコンテンツ(掲示板やコメント欄などユーザー誰でもリンク掲載することが許可されているコンテンツとか)
〇有料リンク(金銭やり取りがあるリンク、アフェリエイトや商品使用レビューとかでしょうか)
〇クロール優先順位を下げたいコンテンツ(ログイン画面とか)など

上記のようなコンテンツやサイトに対して使うことが多いようです。

特定のリンクに対して rel=”nofollow” を使用する – Search Console ヘルプ
https://support.google.com/webmasters/answer/96569?hl=ja

「rel=”noopener”」について
リンク先ページを別ウインドウで開く「target=”_blank”」にはリンク元ページのURL操作するTabnabbing(タブナビング)というブラウザ脆弱性があり、rel=noopenerを追記するとセキュリティとパフォーマンスの低下を防ぐことができます

引用の条件

引用は著作物を著作権者の承諾なしに利用できる方法で著作権法で定義されています。(著作権法第32条)
引用と無断転載は違うものです。
しかし、引用する場合には注意が必要で、引用部分を『』や“”で囲ったり、blockquoteタグ・citeタグを使って引用とオリジナル部分を区別して引用元を書いておけば著作権法で定義された引用となるわけではなく、引用とみなされるにはいくつか条件がある。

〇コンテンツの中でオリジナルの方が多く自分の著作物が「主」であり、引用の方が少なく「従」であること
(引用部分が大半を占める場合は引用に当たらない可能性があり、引用は必要最小限に留める必要がある)
〇引用をする必然性があること
〇引用の目的上正当な範囲であること

また、引用は著作権法第32条だけでなく、著作物ということで第30条の私的使用のための複製、30条の4思想又は感情を自ら享受し又は他人に享受させることを目的としない場合、も関連性があり、
裁判の判例や事例によっては適切だとされるやり方は差異があるみたいです。

画像や動画の引用もオリジナル部分と区別して引用元明示する必要がある

庁とか公的機関や大きなサイトでの画像や動画に関する引用のやり方はヒットしなかったのですが…画像や動画の引用について書かれてる記事も多く見受けられました。
画像引用のイメージ
著作物は文章だけでないし、著作権法第32条の引用は著作物を対象として定めているので、著作物全般に当てはまるものでしょう。
ただ、画像や動画は文章より引用の必然性がある時は少ないと思うのでイメージ写真みたいな感じで使い方のならフリー素材サイトを利用した方がいいと思う。

 

引用も奥が深いというか、どこからが引用なのか、リライトか、判断が難しい場合も多々ある。CSSやPHP、htmlなど長くないコードは仕様なのでそうだと思う。
構成するためのコードやタグ単体には創作性があるとは言い難いだろう、例えば<span style=”color: #000;”>〇▲□</span>だけのHTMLタグだけじゃ創作性はない。

さすがにサイトのコード丸ごとコピーとかは有りえないですが(検索サービスのクローラーからコピーコンテンツと判断されるでしょうし、これは違法行為にならないとしてもモラル的にはアウト)
コードが紹介されていて、それをヒントに自分で作った時や一部だけ活用した時は線引きが難しい。そういう場合は情報源と言う意味のソース元、情報源、情報元…と記しておくのがいいのかなと、悩むケースもありそうですね。

タイトルとURLをコピーしました