【2022年3月版】文章・画像を引用する時のHTMLの書き方|SEO基礎
自分のウェブサイトに外部サイトの情報を記載するときには、引用タグを使う必要があります。当記事は、その記述方法を解説したものです。
対象読者は、テキストエディタを使ってHTMLをコーディングする方です。
当記事で紹介するHTMLについて
情報源:WHATWG
当記事は『WHATWG』の情報をもとに作成したものです。
↓ WHATWG の説明
参考にしたページ »»» 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>で囲む
- 上記3つを<figure>で囲む
情報源:4.4.4 The blockquote element|HTML Standard
具体例
ウェブページでの表示(デザインは自由)
↓ 上記の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>で囲む
- 上記3つを<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
具体例
ウェブページでの表示(デザインは自由)
↓ 上記の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ツール
タイトルタグに設定した文章が、Google でどのように表示されるかリアルタイムで確認できるツールです。