WEB歴 8年の専門家が、ブログを始めるのに必要な知識を『どこよりも』わかりやすく説明!

お問い合わせ
公開:2020年1月21日 / 更新:2021年4月23日

文章・画像を引用する時のHTMLの書き方|SEO基礎

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

当記事は、外部のウェブサイトにある画像や文章を、自分のウェブサイトに掲載するときに記述すべきHTMLの書き方について説明したものです。

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

訂正:画像を引用する場合

正しい … <figcaption>

誤り … <figurecaption>


 2021年4月23日

当記事で紹介するHTMLの書き方は「W3C」のもの

はじめに。

当記事で紹介するHTMLの書き方は、「W3C」の公式サイトにある下記ページを参考にしています。

そのため、当記事で紹介している内容は信頼できるものです。

HTMLに関する知識がある人ならばW3Cについて知っているかと思いますが、念のため説明しておきます。

W3Cは、以下のような団体です。

World Wide Web Consortium(ワールド・ワイド・ウェブ・コンソーシアム)は、World Wide Webで使用される各種技術の標準化を推進する為に設立された標準化団体、非営利団体である。略称はW3C(ダブリュースリーシー)と略称される。

上記をみると、当記事で紹介するHTMLの書き方は信頼できるということが分かるかと思います。





↑ 目次にもどる

それでは、HTMLの書き方を紹介していきます。

文章を引用する場合は <blockquote>

まず、外部サイトの文章を引用するときのHTMLタグの書き方を紹介します。
HTMLの書き方は、以下のとおりです。


                                <blockquote>
                                <p>ここに引用する文章を記述。</p>
                                
                                <footer>出展:<cite><a href="引用するウェブページのURL">引用するウェブページのタイトル</a></cite></footer>
                                </blockquote>
                            

»»» 参考:W3C:HTML 5.2: 4.4. Grouping content「EXAMPLE15」

上記HTMLコードのポイントは、下記2つです。

  • 一番外側を<blockquote>で囲む。
  • 引用元の情報を<cite>で囲む

なお、<footer>は必須ではありません。
しかし、<footer>を使用した方が、HTMLの構造としては良いとされています。

<footer>を使用しないHTMLについて知りたい方は、下記ページをご覧ください。

参考情報

»»» 参考:W3C:HTML 5.2:4.4. Grouping content「EXAMPLE16」

具体例で説明

先ほどの説明だけだと分かりづらいと思います。

そこで、ここからは、外部サイトの文章を引用するときのHTMLの書き方を具体例を使って説明します。

たとえば、外部サイトの文章を、次のように引用するとします。

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

この場合ならば、HTMLは以下のようになります。


                                                <blockquote>
                                                <p>(前略)Google 検索が機能するのは、どのサイトのコンテンツが重要かを判断するうえで、膨大なユーザーがウェブサイトに張ったリンクを基準としている(後略)</p>
                                                
                                                <footer>出展:<cite><a href="https://www.google.com/intl/ja/about/philosophy.html">Google が掲げる 10 の事実</a></cite></footer>
                                                </blockquote>
                                            

以上で、文章を引用する場合は <blockquote>、の説明は終了です。

↑ 目次にもどる

フレーズ(短い文章)を引用する場合は<q>

次に、外部サイトのフレーズ(短い文章)を引用するときのHTMLタグの書き方を紹介します。HTMLの書き方は、以下のとおりです。


                                <p><cite>引用元の情報</cite> ... <q cite=“引用元のURL">引用するフレーズ </q> ... <p>
                        

»»» 参考:W3C:HTML 5.2: 4.5. Text-level semantics「EXAMPLE20」

上記説明だけだと分かりづらいので、具体例を使って説明します。
たとえば、他のウェブサイトの文章を以下のように引用したいとします。

TK-CREATEは、ウェブサイトで「SEO対策はGoogle対策」と言っています。


この場合ならば、HTMLは以下のようになります。


                <p><cite>TK-CREATE</cite>はウェブサイトで「<q cite=“https://tk-create.com/seo/what-is-seo/">SEOはGoogle対策である </q>」と言っています。<p>
    

上記HTMLコードのポイントは、下記3つです。

  • 引用元(サイト名)を<cite>で囲む。
  • 引用する文章を<q>で囲む
  • <q>の中に記述する cite に、引用元URLを設定する

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

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

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

したがって、<blockquote>にするか<q>にするか迷った場合は、「どちらかといえばコッチ」といった感じで決めてしまえば良いと私は思います。


以上で、フレーズ(短い文章)を引用する場合は<q>、の説明は終了です。

↑ 目次にもどる

画像を引用する場合のHTMLの書き方

次に、他のウェブサイトの画像を引用する場合のHTMLの書き方を紹介します。
HTMLの書き方は、次のとおりです。


                                <figure>
                                <img src="ファイルのパス" alt="" />
                                <figcaption>引用元:<cite>ウェブサイト名</cite></figcaption>
                                </figure>
                            

»»» 参考:W3C:HTML 5.2:4.4. Grouping content「EXAMPLE 33」

参考までに、「ファイルのパス」の具体例を紹介すると、以下のとおりです。

  • ① https://tk-create.com/assets/images/sample.png
  • ② ../../assets/images/sample.png

なお、上記①②のどちらになるかは、サイトによって違います。

別の書き方(簡単なHTMLの書き方)

先ほど紹介したHTMLを書くのは面倒くさい… という方のために、もう一つの書き方を紹介します。それは、以下のものです。


            <blockquote>
            <img src="ファイルのパス" alt="" />
            </blockquote>
        

»»» 参考::W3C:HTML 5.2:4.4. Grouping content「EXAMPLE 34」

こちらの書き方は、先ほど紹介したものよりも、かなり簡単です。
ただし、上記HTMLコードを使用する方には、知っておいてほしいことがあります。

それは、HTML5では、先ほど紹介した<figcaption>を使ったHTMLの記述が推奨されていることです。


以上で、画像を引用する場合のHTMLの書き方、の説明は終了です。

↑ 目次にもどる

知っておくと役立つ知識とHTMLを書く際の注意点

最後に、当記事で紹介したHTMLを書く際に、役立つ知識と注意点を紹介します。

役立つ知識:引用元の具体例

まず、役立つ知識として、<cite>内に記述する「引用元の具体例」を紹介します。

それは、以下のものです。

書籍の場合

  • 作品タイトル
  • 著者の名前(人または組織名)

ウェブサイトの場合

  • サイト名
  • ページタイトル

<cite> を記述する際の注意点

次に、<cite>を記述する際の注意点を紹介します。

それは、引用元以外の情報を <cite> の中に入れないことです。具体例で説明すると以下のとおりです。

間違ったHTMLの書き方↓


                                                    <cite>出典:引用元の情報</cite>
                                                        

上記HTMLが間違っている点は、「出典:」が <cite> の内側にあることです。

ちなみに、正しいHTMLの書き方は次のとおりです。


                    出典:<cite>引用元の情報</cite>
                        

↑正しいHTMLの書き方


以上で、「知っておくと役立つ知識とHTMLを書く際の注意点」は終了です。

↑ 目次にもどる

おわり

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

当記事の内容が役にたったという方は、ぜひ、他の方に紹介してください。

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