【2022年3月版】文章・画像を引用する時のHTMLの書き方｜SEO基礎
自分のウェブサイトに外部サイトの情報を記載するときには、引用タグを使う必要があります。当記事は、その記述方法を解説したものです。
対象読者は、テキストエディタを使ってHTMLをコーディングする方です。
当記事で紹介するHTMLについて
情報源：WHATWG
当記事は『WHATWG』の情報をもとに作成したものです。
↓ WHATWG の説明
WHATWG (Web Hypertext Application Technology Working Group) はウェブ標準の保守や開発を行うためのコミュニティで、 DOM, Fetch, HTML などを扱っています。 Apple、Mozilla、Opera の従業員たちによって 2004 年に設立されました。
参考にしたページ »»» HTML Standard
『WHATWG』の記述方法に、「引用元へのリンク」を追加
『WHATWG』の記述方法には引用元へのリンクがありません。
当記事で紹介するHTMLは、WHATWGの記述方法に引用元へのリンクを追加したものです。
リンクを追加した理由は、著作権侵害で訴えられることを防ぐためです。
リンクを記述したくない方は下記ページをご覧ください。
»»» HTML Standard
リンクが必要なのは、ウェブページから引用する場合
当たり前かもしれませんが、リンクが必要なのはウェブページから引用する場合です。書籍などは不要です。
HTMLの記述方法は複数ある
外部サイトの情報を引用するときのHTMLは複数あります。たとえば文章を引用するときの記述方法は6種類あります。
当記事で紹介するのは、複数ある記述方法のなかから1番良いと筆者が考えるものです。
その他の記述方法を知りたい方は、下記
ページをご覧ください。
»»» HTML Standard
文章を引用する場合のHTML
外部サイトの文章を引用する場合のHTMLは以下のとおりです。
<figure>
<blockquote>
<p>引用する文章</p>
</blockquote>
<figcaption>出典：<cite><a href="引用するウェブページのURL">引用するウェブページのタイトル</a></cite></figcaption>
</figure>
上記HTMLのポイントは次の4つです。
- 引用する文章を<blockquote>で囲む
- 引用元の情報を<cite>で囲む
- <cite>を<figcaption>で囲む
- 上記３つを<figure>で囲む
情報源：4.4.4 The blockquote element｜HTML Standard
具体例
ウェブページでの表示（デザインは自由）
（前略）Google 検索が機能するのは、どのサイトのコンテンツが重要かを判断するうえで、膨大なユーザーがウェブサイトに張ったリンクを基準としている（後略）
↓ 上記のHTML
<figure>
<blockquote>
<p>（前略）Google 検索が機能するのは、どのサイトのコンテンツが重要かを判断するうえで、膨大なユーザーがウェブサイトに張ったリンクを基準としている（後略）</p>
</blockquote>
<figcaption>出典：<cite><a href="https://www.google.com/intl/ja/about/philosophy.html">Google が掲げる10の事実</a></cite></figcaption>
</figure>
↓上記HTMLの説明
- 引用する文章を<blockquote>で囲む
- 引用元の情報を<cite>で囲む
- <cite>を<figcaption>で囲む
- 上記３つを<figure>で囲む
情報源：4.4.4 The blockquote element｜HTML Standard
フレーズ（短い文章）を引用する場合のHTML
外部サイトのフレーズ（短い文章）を引用するときには下記2つを使用します。
- <q>
- <cite>
具体例を使って説明します。
下記情報をウェブサイトに引用するとします。
- 文章……HTMLを正しく書くと検索順位が上がる
- 上記文章があるウェブサイト
- サイト名…TK-CREATE
- URL…https://tk-create.com
この場合のHTMLは次のとおりです。
<cite>TK-CREATE</cite>には<q cite="https://tk-create.com">にはHTMLを正しく書くと検索順位が上がる</q>と書かれてます上記HTMLのポイントをまとめると以下のとおりです。
- 引用元（サイト名）を：<cite>で囲む
- 引用する文章を<q>で囲む。
- <q>にウェブページのURLを記述する
情報源：4.5.7 The q element｜HTML Standard
ウェブページ上のデザイン：変更しない場合が多い
ウェブページ上のデザインは、下記2つ同じ場合が多いです。
- 他のサイトから引用した部分
- 自分で考えた内容（引用していない部分）
画像を引用する場合のHTML
外部サイトの画像を引用する場合のHTMLは以下のとおりです。
<figure>
<img src="引用する画像" alt="">
<figcaption>出典：<cite><a href="引用するウェブページのURL">引用するウェブページのタイトル</a></cite></figcaption>
</figure>
上記HTMLのポイントは次の4つです。
- 引用する画像を、URLで指定する
- 引用元の情報を<cite>で囲む
- <cite>を<figcaption>で囲む
- <img>と<figcaption>を、<figure>で囲む。
情報源：4.4.12 The figure element｜HTML Standard
具体例
ウェブページでの表示（デザインは自由）
↓ 上記のHTML
<figure>
<img src="https://www.xserver.ne.jp/manual/man_how_to_start_wpblog.php" alt="画像の説明">
<figcaption>出典：<cite><a href="https://www.xserver.ne.jp/manual/man_how_to_start_wpblog.php">エックスサーバーでブログを始めよう！初心者でもわかるWordPressブログの始め方</a></cite></figcaption>
</figure>
↓上記HTMLの説明
上記HTMLのポイントは次の4つです。
- 引用する画像を、URLで指定する
- 引用元の情報を<cite>で囲む
- <cite>を<figcaption>で囲む
- <img>と<figcaption>を、<figure>で囲む。
情報源：4.4.12 The figure element｜HTML Standard
引用タグの説明は以上です。
参考までにHTMLを勉強するときに役立ちそうな書籍を紹介します。
HTML解体新書｜太田良典 (著)
下記Amazon.com の書籍紹介です。
HTMLをより深く学習する、言い換えると深く理解するためには、HTMLのシンタックス(構文)とセマンティックス(意味論)を理解することが不可欠です。
中略
HTMLの究極の学習コンテンツはウェブ上で策定・公開されているHTML仕様といえますが、現在のHTML仕様は多数の前提知識が必要であり、中・上級者向けともいえます。
本書を読み進めることで、静的なウェブページから動的なウェブアプリケーションまで、筋の通ったHTMLを設計・記述できるようになることを目指します。後略
Amazonでの評価は★4.6（94個の評価）です。なお私は読んでいません。
Amazonの書籍ページにいくと試し読みができます。下記リンクです。
以上で当記事はおわりです。
自作したSEOツールの宣伝
»»» Googleプレビュー付きタイトルタグ文字数カウント
ウェブページのタイトルを決めるときに役立つツールです。ウェブブラウザ上で使えます。
特徴はGoogle検索結果でタイトルがどのように表示されるか、リアルタイムで確認できることです。
ツールは無料で使えます。会員登録は不要です。
»»» ツールを利用してみる
