引用タグは、他の人が作成した文章等を自身のサイトやブログに引用する時に使用するタグです。
この引用タグを使用しないで、そのまま文章を載せてしまうとコピーコンテンツとしてSEO的にマイナスになったり、最悪の場合、著作権侵害なんてことにもなる可能性もあります。
ですので、今回は引用タグの使い方を紹介しますので参考にしてみてください。
引用タグの種類
引用タグは<blockquote><q><cite>の3種類です。
これらのタグは、それぞれ使用用途があるのでそれらを説明していきます。
<blockquote>タグ
引用タグといえば真っ先に思い浮かぶのがこ<blockquote>タグではないでしょうか。
それくらい一般的になじみがあるタグですが、基本的な用途として2，3行以上のある程度まとまった文章等を引用するケースで使用します。
<blockquote>
<p>ここに引用する文章等をこのように入れます。これはblockquoteタグの使い方の例として挙げたものですので実際に他のサイト等から引用したものではありません。</p>
</blockquote>この<blockquote>タグを使用する際の注意点ですが、blockquoteタグ内にテキストを入れる場合は<p>タグなどのブロック要素で囲ってやらないといけません。
直接テキストを入力するとインラインテキストになりますのでhtmlの構造的によろしくありません。
ですので<blockquote>タグ内の文章は<p>タグで囲ってください。
<q>タグ
次に<q>タグですが、<blockquote>と違い、改行を含まない短い文章を引用する際に使用します。
<q>短い引用文で使用</q><q>タグの場合、タグ内のテキストを<p>タグなどのブロック要素で囲う必要はありません。
ただ、使用頻度としてはあまりないような気もしますが…
<cite>タグ
この<cite>タグは引用元のURLや情報を示すためのものです。
使い方としては以下のような形です。
<blockquote>
<p>ここに引用する文章等をこのように入れます。これはblockquoteタグの使い方の例として挙げたものですので実際に他のサイト等から引用したものではありません。</p>
</blockquote>
<p><cite>引用元：<a href="引用元のURL">引用元のページタイトルなど</a></cite></p>CSSなどで見栄えを変更するのであれば以下のような形がいいかもしれません。
<div>
<blockquote>
<p></p>
</blockquote>
<cite>引用元：<a href=""></a></cite>
</div><cite>タグを使用する注意点として、このタグはインライン要素ですので厳密にいうと<blockquote>内に入れることができません。
入れたからといって何かエラーが生じるかといえばそうではないのですが、構造上あまりよろしくないといったところです。
ですので先ほど例に挙げたように<div>タグで囲ってあげるか、もしくは以下のように<figure>タグを使う方法をおすすめします。
<figure>
<blockquote>
<p>ここに引用文</p>
</blockquote>
<figcaption>
<cite>ここに引用元の情報</cite>
</figcaption>
</figure>文頭でも言及しましたが、SEO的な観点からするとこの引用タグが与える影響はそこまで大きくないような気もします。
Googleの中の人も「見てる」といったり「見ていない」と意見が異なってたりしているようなので、実際にはどうなんだろうと思っています。
ただ、SEO対策としてはこういった細かいところもしっかりとしておいた方がいいとは思いますので、上記の内容を参考にして引用タグを使ってみてください。