岐阜県大垣市のホームページ制作＆SEO対策所

当サイトのリンクには広告が含まれています

公開：2020年1月21日 / 更新：2022年3月11日

【2022年3月版】文章・画像を引用する時のHTMLの書き方｜SEO基礎

「文章・画像を引用する時のHTMLの書き方」を解説する女性

自分のウェブサイトに外部サイトの情報を記載するときには、引用タグを使う必要があります。当記事は、その記述方法を解説したものです。

対象読者は、テキストエディタを使ってHTMLをコーディングする方です。

当サイトの管理人のイラスト
当サイトの管理人のイラスト

筆者：タケヨシ

ホームページに関する仕事をしています。今年で10年目。現在はフリーランスで働いています。

ホームページに関する困りごとがあればご相談ください。

»»» 相談する

目次

クリックすると好きなところからお読みいただけます。

当記事で紹介するHTMLについて

情報源：WHATWG

当記事は『WHATWG』の情報をもとに作成したものです。

↓ WHATWG の説明

WHATWG (Web Hypertext Application Technology Working Group) はウェブ標準の保守や開発を行うためのコミュニティで、 DOM, Fetch, HTML などを扱っています。 Apple、Mozilla、Opera の従業員たちによって 2004 年に設立されました。

出典：WHATWG - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

参考にしたページ　»»» 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 検索が機能するのは、どのサイトのコンテンツが重要かを判断するうえで、膨大なユーザーがウェブサイトに張ったリンクを基準としている（後略）

出典：Google が掲げる 10 の事実

↓ 上記の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

具体例

ウェブページでの表示（デザインは自由）

自宅のPCでWordPressブログを作る際に必要となる知識の例
出典：エックスサーバーでブログを始めよう！初心者でもわかるWordPressブログの始め方

↓ 上記の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解体新書　仕様から紐解く本格入門

HTML解体新書｜太田良典 (著)

下記Amazon.com の書籍紹介です。

HTMLをより深く学習する、言い換えると深く理解するためには、HTMLのシンタックス(構文)とセマンティックス(意味論)を理解することが不可欠です。

中略

HTMLの究極の学習コンテンツはウェブ上で策定・公開されているHTML仕様といえますが、現在のHTML仕様は多数の前提知識が必要であり、中・上級者向けともいえます。
本書を読み進めることで、静的なウェブページから動的なウェブアプリケーションまで、筋の通ったHTMLを設計・記述できるようになることを目指します。

後略

出典：Amazon

Amazonでの評価は★4.6（94個の評価）です。なお私は読んでいません。

Amazonの書籍ページにいくと試し読みができます。下記リンクです。

»» HTML解体新書｜Amazon

以上で当記事はおわりです。

↑ 目次にもどる

自作したSEOツールの宣伝

ロリポップの管理画面にある契約情報画面。「契約期間」という項目に2023年～2027年1月9日という記述がある

»»» Googleプレビュー付きタイトルタグ文字数カウント

ウェブページのタイトルを決めるときに役立つツールです。ウェブブラウザ上で使えます。
特徴はGoogle検索結果でタイトルがどのように表示されるか、リアルタイムで確認できることです。

ツールは無料で使えます。会員登録は不要です。

»»» ツールを利用してみる

トップへ戻るボタン