他のサイトのコンテンツや文献の一部を引用する際に使うのが引用タグです。

引用セクションであるということを、ユーザーと検索エンジンに伝える為に使用します。

<blockquote>と<q>は引用文であることを示すタグ。

<cite>は引用元や出典を明記する時に使います。

今回の記事では引用タグの使い方を解説いたします。

引用タグ(<blockquote>タグと<q>タグ)の解説

引用タグとは

引用タグとは、外部のサイトや文献などから引用を行う際に引用セクションであることを伝えるために使うタグです。

自分の記事のオリジナル部分の内容と引用箇所のセクションをわけることにより、ユーザーはひと目で引用であることが理解できますし、検索エンジンは引用箇所に記述されているテキストを引用であると理解し重み付けを減らし、オリジナルのテキストへの重み付けを増やすことにより、オリジナル部分の評価が上がると考えられます。

また、一般的に引用タグは引用元へのリンクと対で利用されますので、優れた情報を引用し、優れた情報を公開しているサイトへ発リンクを行うということは、そのページのハブスコアを高めることにもなるでしょう。

参考記事：外部リンクを張るとSEO（検索ランキング）に不利?発リンクの利点

<q>と<blockquote>と<cite>

<q>タグ

改行不要な短い文章を引用する際には<q>タグを利用します。

CSSを設定していない場合、一般的なブラウザではダブルクオーテーション（”）で囲われます。

テストしてみたところ、ChromeやOperaでは半角のダブルクオーテーション（”）で囲われ、FireFoxでは全角のダブルクオーテーション（“”）で囲われました。

WebKitでは半角、Geckoでは全角なのかもしれません。

Internet Explorerではなんの視覚効果もありません。

そのため、やや使いにくい印象もあり、<q>タグはさほど使われることなく、後述する<blockquote>を使うのが一般的になっています。

使い方

<p>ほむら：<q>私ね、未来から来たんだよ</q></p>

<blockquote>タグ

一般的によく使われる引用タグは<q>ではなく、こちらの<blockquote>です。

ブラウザ上での表示は左右にインデント（空白が挿入され字下げされる）が設定されます。

使い方

<blockquote>
<p>ある朝　僕は　空の　中に、黒い　旗が　はためくを　見た。<br />
はたはた　それは　はためいて　ゐたが、音は　きこえぬ　高きが　ゆゑに。<br />
手繰り　下ろさうと　僕は　したが、　綱も　なければ　それも　叶はず、旗は　はたはた　はためく　ばかり、空の　奥処に　舞ひ入る　如く。</p>
</blockquote>

<cite>

出典や引用元をマークアップするタグです。

一般的なブラウザでは、文字が斜体（イタリック）で表示されます。

書籍名や著者名をマークアップする際に使います。

ウェブサイトからの引用の場合、aタグで出典元へリンクを張るとなお良いでしょう。

使い方

<blockquote>
<p>ではみなさん、喜び過ぎず悲しみ過ぎず、テムポ正しく、握手をしませう。</p>

<p>つまり、我等に欠けてるものは、実直なんぞと、心得まして。</p>

<p>ハイ、ではみなさん、ハイ、御一緒に――<br />
<p>テムポ正しく、握手をしませう。</p>

<cite>中<a href=”http://www.aozora.gr.jp/cards/000026/files/219_33152.html”>中原中也 在りし日の歌より春日狂想</a></cite>
</blockquote>

<blockquote>や<q>の視覚効果に装飾を施したい

スタイルシートを設定することにより、見た目を変更することが可能です。

blockquote {

ここに好みのスタイルシートを記述

}

表示例

愛するものが死んだ時には、自殺しなけあなりません。

愛するものが死んだ時には、それより他に、方法がない。

けれどもそれでも、業が深くて、なほもながらふことともなつたら、

奉仕の気持に、なることなんです。

奉仕の気持に、なることなんです。

一般的な引用のやり方

引用元のURLを表示してから<blockquote>で引用部分を囲う方法

<p>Googleが推奨する正しいSEOが非常にわかりやすく解説解説されているのが<cite>検索エンジン最適化スターターガイド</cite>です。</p>

<p>検索エンジンスターターガイドによると、各ページにはユニークな固有のタイトルを付けることが好ましいとされています。</p>

<blockquote>

</p>それぞれのページには固有のタイトルが付いていることが理想的です。各ページがそれぞれどう違うのか、Googleの検索エンジンがより良く理解する手助けとなります。</p>

</blockquote>

<blockquote>の中で出典を表示する方法

<blockquote>

<p>コンテンツのカテゴリや、ファイル名に説明的な名前を利用することは、検索エンジンがそれらのドキュメントをクロールしやすくなることにもつながります。</p>

<p>出典：<cite>検索エンジン最適化スターターガイド</cite></p>

</blockquote>

注意点

あくまでも引用する時に使うタグですので、見栄えを良くする目的で使わないようにしましょう。

悪い例

<blockquote>

<h2>今週のお勧め情報！！！！！１１１１１</h2>

<p>１日１０分の作業で１億万円稼ぎ出す伝説の奥義！！</p>

<p>Facebookで10000いいね!を獲得してボロ儲けする手法</p>

<p>ほったらかしで被リンクを獲得し続ける超高性能被リンク調達ツール</p>

</blockquote>

上記のように、インデントさせる目的で（装飾目的で）<blockquote>を使わないようにしましょう。

装飾を行いたい場合は、装飾用のCSSを用意するといいでしょう。

関連記事

強調タグ(strong,em)の解説と使い方と注意点
<link rel=”canonical”>（カノニカルタグ）の使い方
見出しタグの使い方。hnタグ(h1～h6)を正しく使い階層構造をもたせよう
リスト構造(ul,ol,li)タグで箇条書きを正しく設定しよう
robots metaタグ(noindex,nofollow,noarchive)の使い方
METAタグ(keywords description)の使い方
rel=”nofollow” 属性の解説とその使い方
【ロングテールSEO入門5】ロングテールSEOまとめ
【ホワイトハットSEO入門その3】ページの内容を検索エンジンに伝えるライティング方法
Wikipediaを超えろ!!優良なコンテンツを作る非常に簡単な方法