記事の取り扱う分野や内容によっては、他のサイトのコンテンツの一部を引用することで、コンテンツに付加価値を加えたり、より分かりやすくなる効果が得られることがあります。Google の検索において、独自性や信頼性の高いコンテンツであるかは重視されるポイントの一つです。

独自性と信頼性を高めるためには、引用はすべきでないと言うことではありません。Google Search Consoleのヘルプの説明を以下に引用します。

信頼性がある: 独自の調査、引用、リンク、レビュー、証言などを通じて、サイトの信頼性を示します。著者の経歴や実際の顧客からの証言などを掲載すれば、サイトの信頼性や評価を高めるのに役立ちます。[ハイライトはブロギングライフ運営者が追加］

– 1.4 質の高いコンテンツを作成する / Search Console ヘルプ

引用は信頼性を高めることに役立つと書かれています。もちろん、引用することが必ず信頼を高めるということにはなりません。適切で効果的な引用は、信頼性を高めたり、コンテンツの品質や価値を高めることに繋がるということです。

本記事では、テキストを引用する際、blockquote とcite タグを使用した適切な方法を紹介します。上で紹介した引用の方法も含まれています。

HTML <blockquote>  タグ

<blockquote> は、他のソースからの引用部を指定するタグです。

HTML 4.01とHTML5での違い

HTML 4.01では、<blockquote>は、長めの引用を定義します。（短い引用は<q>を使います。）

HTML5では、<blockquote>は、他のソースからの引用部を定義します。

HTMLとXHTMLでの違い

<blockquote>が、XHTMLに準拠するためには、囲っている箇所が全てブロックレベルのとなっていることが求められます。

以下の例では、内部がpタグで囲われています。（ブロックレベルになっています。）

cite アトリビュート

<blockquote>は、参照元をciteアトリビュートを使用して示すこともできます。

引用する場合、引用元（参照元）を明記する方がより良いと思います。どこから引用しているのかを、マークアップで示すことはコンテントの品質を高めることに寄与すると思います。また、引用する場合に参考にしたページ、サイトを紹介するのは基本的な礼儀と言えます。

上の様な形でciteアトリビュートで参照元のURLを示した場合、クローラーは理解できますが、画面の表示を見るユーザーには、URLは表示されません。ユーザーも参照元が分かる方が良いのにと思っていたところ、2016年にHTML5 の使用がアップデートされblockquote内にciteの使用が可能となりました。

アップデートされたHTML5 での<blockquote>と<cite>

最新のHTML5 での<blockquote>の定義は以下のようになっています。

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Content inside a blockquote other than citations and in-line changes must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.

（訳）

blockquote 要素は、他のソースを引用したコンテントを示すものです。オプションで、引用元を表記できます。引用元は、<footer>か<cite>要素の中でなければなりません。また、オプションで行間に注釈や略を入れることもできます。

blockquote内の引用表記や行間の変更以外のコンテントは、外部ソースからの引用でなければなりません。引用したものにアドレスがある場合は、cite アトリビュートで表すことができます。

（訳終わり）

HTML5では引用する文に注釈を加えたり、省略することを認めています。変更を加えた場合は、変更箇所・内容が分かるようにします。

blockquote内にfooterとciteを使用した引用例

Search Console HelpのGoogle 検索の詳細について書かれたページの引用を<blockquote>に<footer>と<cite>を使用したコード例です。

本記事の冒頭で紹介したSearch Consoleの引用部も上記例の様に<footer>と<cite>を組み合わせています。

cite 要素について

cite の定義

citeは、クリエーティブワークの参照を指定します。その作業（ワーク）のタイトル名、作者（人や組織）、またはURLが含まれていなければなりません。

クリエーティブワークは、本、一枚の紙、エッセイ、詩、スコア、歌、スクリプト、フィルム、TV番組、ゲーム、スカルプチャ、絵画、映画、演劇、オペラ、ミュージカル、展示、法律事例、ウェッブサイト、ウェッブページ、ブログ記事またはコメント、フォーラムの投稿またはコメント、ツイート、口頭または書面による声明、他を含みます。

上記cite の定義は、W3Cのドキュメントに記載されているcite エレメントの説明を訳したものです。

上の説明にあるようにciteは、タイトル、作者、URLなどを含めて、参照元が明確に分かるようすることが重要な使い方のポイントです。

例：citeで小説名を参照