SEO対策にもなるblockquote、q など引用タグが必要な理由と使い方まとめ

blockquote、q、citeなど引用タグが必要な理由&使い方

ブログやサイトなどで文章を引用した際は必ず引用タグを使い、引用であることを示すのが基本です。

「 引用タグ必要?引用ってわかるように書けばいいんじゃないの? 」と思ったアナタ、甘い甘い甘すぎる。砂糖たっぷりクリスピークリームドーナツくらい甘い。

Googleのペナルティで検索順位下がっても知りませんよ。

引用タグが必要な理由

「 わざわざ引用タグを使わなくても引用とわかるように記載すればいいのでは? 」

そう思う方もたくさんいらっしゃるかもしれません。確かに引用タグを使わずとも、引用の要件を満たすことは可能です。

が、それはあくまでも文章を読む人間の場合。

検索対象としてブログやサイトを巡回するGoogleロボットは人間のように文脈を完璧に理解できません

なので、引用とわかるように引用タグを使ってあげる必要があるのです。

その辺りをちゃんとしないと、Googleに「 この文章ほかのサイトで見たことあるぞ!パクリだ! 」と思われ、検索順位低下などのペナルティを受ける可能性があります。

引用タグの使い方はさほど難しいものでもないので、HTML初心者の方もぜひマスターしてください。

引用タグ <blockquote> と <q> の違いと使い分け

引用タグには<blockquote>と<q>の二種類があります。

違いは、<blockquote>は複数行や段落単位にも対応し、<q>は1行の短文引用に適している点。

基本的にどちらのタグもほかのHTMLタグ同様囲んで使います。以下が実際にどのように書くか、表示されるかの例です。

<blockquote>の使い方と実例

<blockquote>
<p>メロスは激怒した。必ず、かの邪知暴虐の王を除かなければならぬと決意した。</p>
<p>メロスには政治がわからぬ。メロスは、村の牧人である。</p>
<p>笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。</p>
</blockquote>

このように、<blockquote> 引用する文章 </blockquote>とすることで引用タグとして扱うことが可能です。

実際に引用タグを使うと下記のように表示されます。

メロスは激怒した。必ず、かの邪知暴虐の王を除かなければならぬと決意した。

メロスには政治がわからぬ。メロスは、村の牧人である。

笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。

実際表示されるデザインはブラウザやサイトのCSS設定によって変わりますが、引用と分かるように引用符(“)がつくことがほとんどです。

<q>の使い方と実例

<q>は1行程度のごくシンプルな引用の場合に使います。

下記が実際の記述例です。

<q>吾輩は猫である。名前はまだ無い。</q>

アルファベットp(ピー)ではなくq(キュー)である点に注意。<p>タグは段落を表すタグなので、引用でもなんでもなくただ普通に表示されてしまいます。

<blockquote>同様CSSによってデザイン可能なのでブラウザやサイト・ブログによって表示が変わりますが、本ブログでは下記のように表示されます。

吾輩は猫である。名前はまだ無い。

引用元表示もしておこう

引用タグには引用元を表す<cite>タグもあります。実際に使うと下記のような感じ。

<blockquote>
<p>現在インターネットにおいてデータ伝送の主流となっている光ファイバー。</p>
<p>通信速度の高速化のために光を利用したまさに「 光速 」のデータ伝送システムです。</p>
<p>雨の日には水の雫と風の合わせ技で光ファイバー線が揺れてデータ伝送にロスが出てしまうのです。</p>
<cite> - <a href="https://naze.jill-tone.com/rainy_internet_speed/" target="_blank">雨の日、ネットの通信速度が低下し不安定になる理由は?</a> - NazeNaniJillToneより</cite>
</blockquote>

ネット上に存在する文章を引用した場合は上記のようにリンクをつけることもできますが、必須ではありません。

するもしないも自己責任ではありますが、文化庁は例外的な無断利用ができる要件のひとつとして、「 出所の明示 」を挙げています。

引用元は示しておくことをオススメします。

cite要素だけでなくcite属性も

引用元は上記の<cite>タグで独立した要素としてではなく、<blockquote>や<q>タグの属性としてマークアップすることも可能です。

HTMLにおける属性とは、特定のタグ要素の中に ○○=”○○” といった感じで指定するアレ。<a href=”URL”>のhref=”URL”がリンク要素の属性に当たります。

下記のように<blockquote>や<q>タグに入れ、引用元のURLを指定する形で使用します。

<blockquote cite="https://naze.jill-tone.com/ladiesday_why_wednesday/">
<p>「 明日はレディースデイだし一緒に映画でもどうだい? 」</p>
<p>憧れの新垣結衣さんを誘うためいろいろシミュレーションしているうちに、なぜレディースデイが水曜日に集中しているかが判明しました。</p>
</blockquote>

<q cite="https://naze.jill-tone.com/kongzi_descendants/">孔子の子孫は現在、家系図にはいるだけでも200万人を越えています。</q>

ただし、cite属性はURLで指定するため、書籍などからの引用したネット上に存在しない文章を引用するときには使いようがありません。

また、cite属性はcite要素とは違いサイト訪問者には表示されない特徴があります。

この辺りの違いについては別途詳しく解説していますので、併せて下記記事もご覧になってください。

 

まとめ:引用タグが必要な理由と使い方

  • サイト訪問者だけでなく、Googleの巡回ロボットなど人以外にも引用であることを示すため、引用タグは必要。
  • <blockquote>タグは段落単位での引用に使う。
  • <q>タグは1行の短文の引用に使う。
  • cite要素やcite属性により引用元を示すこともできる。

ぶっちゃけた話、ネット上で著作権をきちんと守るため積極的に引用の要件を守ろうと思う方はあまりいらっしゃらないのではないでしょうか。

しかし、冒頭でも述べた通り引用であることをきちんと示さないと、Googleのペナルティを受け検索順位が下がったり、上がらない原因になることも。

SEO対策のひとつと思って、きちんと引用タグを使い分けることをオススメします。