ブログ初心者向けに「ドメイン取得」「レンタルサーバー選び」に役立つ情報を配信

お問い合わせ
公開:2020年1月21日 / 更新:2022年3月11日

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

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

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

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

当記事で紹介する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

外部サイトの情報を引用するときのHTMLは複数あります。文章を引用するときの記述方法だけで6つあります。

当記事で紹介するのは、複数ある記述方法のなかから1番良いと筆者が考えるものです。その他の記述方法を知りたい方は、先ほど紹介したページをご覧ください。

「WHATWG」の記述方法に「引用元へのリンク」を追加

WHATWGの記述方法には引用元へのリンクがありません。

しかし、引用元へのリンクは必須です。なぜかというと多くのウェブサイトには次のような記述があるからです。

当サイトはリンクフリーです。当サイトの情報を引用するときにはリンクを貼ってください。

そして、リンクを貼らないと著作権侵害で訴えられる可能性があるからです。

以上の理由から、当記事で紹介するHTMLには引用元へのリンクを追加しました。その他の部分は、WHATWGの記述方法と同じです。

なお、引用元がウェブページ以外のときにはHTMLから<a>を削除してください。たとえば、書籍などの場合です。


↑ 目次にもどる

ここからは、引用タグの書き方を解説していきます。

文章を引用する場合のHTML

↓ウェブページでの表示例(デザインは自由)

(前略)Google 検索が機能するのは、どのサイトのコンテンツが重要かを判断するうえで、膨大なユーザーがウェブサイトに張ったリンクを基準としている(後略)

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

外部サイトの文章を引用するときには 以下のタグを使用します。

  • <blockquote>
  • <cite>
  • <figure>
  • <figcaption>

具体的には以下のとおりです。

↓ スクロールできます。

<figure>
  <blockquote>
    <p>引用する文章</p>
  </blockquote>    
  <figcaption>出典:<cite><a href="引用するウェブページのURL">引用するウェブページのタイトル</a></cite></figcaption>
</figure>

上記HTMLのポイントをまとめると以下のとおりです。

  • 引用する文章を<blockquote>で囲む
  • 引用元(ウェブページ)情報を<cite>で囲む
  • <cite>を<figcaption>で囲む
  • 上記3つを<figure>で囲む。

※ウェブページへのリンクをはる

参考:4.4.4 The blockquote element|HTML Standard

具体例

以下、具体例です。

(前略)Google 検索が機能するのは、どのサイトのコンテンツが重要かを判断するうえで、膨大なユーザーがウェブサイトに張ったリンクを基準としている(後略)

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

↓ スクロールできます。

<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」の説明は終了です。

↑ 目次にもどる

フレーズ(短い文章)を引用する場合のHTML

外部サイトのフレーズ(短い文章)を引用するときには次のタグを使用します。

  • <q>
  • <cite>

具体的に説明します。たとえば、次の文章を書くとします。

はじウェブにはHTMLは正しく書くべきと書かれている


以下、補足

  • はじウェブ…ブログ名
  • 引用フレーズ…HTMLは正しく書くべき
  • 引用フレーズがあるウェブページのURL…https://haji-web.com/html/

この場合だと次のようにHTMLを記述します。

↓ スクロールできます。

 <p><cite>はじウェブ</cite>には<q cite="https://haji-web.com/html/">HTMLは正しく書くべき </q>と書かれている<p>
    

上記HTMLのポイントをまとめると以下のとおりです。

  • 引用元(サイト名)を<cite>で囲む
  • 引用フレーズを<q>で囲む。
  • <q>には引用フレーズがあるウェブページのURLを記述する。具体的には次のように記述する。<q cite="ウェブページのURL">

参考:4.5.7 The q element|HTML Standard

<blockquote> にするか <q> にするか迷った場合

<blockquote> にするか <q> にするか迷った場合は、どちらを使っても大丈夫です。

なぜかというと、どちらのタグも「この情報は引用である」と検索エンジンに伝えるものだからです。


以上で「フレーズ(短い文章)を引用する場合のHTML」説明は終了です

↑ 目次にもどる

画像を引用する場合のHTML

↓ウェブページでの表示例(デザインは自由)

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

外部サイトの画像を引用するときには以下のタグを使用します。

  • <cite>
  • <figure>
  • <figcaption>

具体的には以下のとおりです。

↓ スクロールできます。

<figure>
  <img src="ファイルのパス" alt="">
  <figcaption>出典:<cite><a href="引用するウェブページのURL">引用するウェブページのタイトル</a></cite></figcaption>
</figure>

上記HTMLのポイントをまとめると以下のとおりです。

  • 引用元(ウェブページ)情報を<cite>で囲む
  • <cite>を<figcaption>で囲む
  • 画像と<figcaption>を<figure>で囲む。

※ウェブページへのリンクをはる

参考:4.4.12 The figure element|HTML Standard

具体例

以下、具体例です。

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

↓ スクロールできます。

<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」説明は終了です。

↑ 目次にもどる

おわり

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

タグ:
トップへ戻るボタン