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

2020年3月27日

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

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

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行程度のごくシンプルな引用の場合に使います。

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

下記が実際にqタグを使う際の記述例。

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

<blockquote>と同じくブラウザやサイト・ブログによって表示が変わりますが、本ブログでは下記のように表示されます。

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

現在では1行の短文の引用でも<q>タグではなく<blockquote>が主流。

特別<q>を使うメリットもないので、<blockquote>で統一することをオススメします。

引用元表示もしておこう

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

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

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

ただ、タイトルのみで作者名などは入れないのが基本。

なお、上記ではbrockquote要素のなかにcite要素を含めていますが、必ずしも内包しなければいけないわけではありません。

brockquote要素の外にcite要素を置いての引用元の表記もありです。

引用元の表示はHTMLマークアップとして必須ではありません。

イマイチよくわからない、って場合はcite要素を使わずspanやpなどで表示してもさして問題はありません。

が、引用元は明示することをオススメします。

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

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属性はcite要素とは違いサイト訪問者には表示されない特徴があります。

先述の通り引用元が表記されていなければ引用としての要件を満たせないので、cite属性を入れてあれば引用になる、ってわけではありません。注意。

上記コード例ではわかりやすいようcite要素は入れずcite属性のみ記載しましたが、両方入れた方がいいでしょう。

また、cite属性には書籍ISBNコードを記載することも可能。本から引用した場合、ISBNコードを入れるとより丁寧。

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