フリーランスのWEBクリエイター。岐阜県を拠点に活動中。

お問い合わせ
公開：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://haji-web.com/html/">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="自宅のPCでWordPressブログを作る際に必要となる知識の例">
  <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

以上で、当記事は終了です。

おすすめの無料SEOツール

»»» 無料のSEOツール　タイトルタグ文字数カウント

タイトルタグに設定した文章が、Google でどのように表示されるかリアルタイムで確認できるツールです。

SEOの人気記事

タイトルタグ

トップへ戻るボタン