WEB歴 7年の専門家がホームページやブログ運営に役立つ情報を発信しています。

記事公開日:2020年1月21日

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

自分のウェブサイトに、他の人のウェブサイトの画像や文章を使用することを引用といいます。

そして、HTMLには「引用したコンテンツ」について「引用です」と検索エンジンに明確に伝える役割を持つタグがあります。

当記事は、引用した部分に使用するべきHTMLタグの書き方について、具体例を用いてわかりやすく説明したものです。

当記事で紹介するHTMLの書き方について

当記事で紹介するHTMLの書き方は、次のウェブサイトを参考にしたものです。

上記のウェブサイトには、文章や画像を引用する際に記述するHTMLの例が数多く紹介されています。

その中から最も使いやすい、と筆者が感じたものを当記事では紹介しています。

ちなみに、先ほど紹介したウェブサイト「W3C:「HTML 5.2」に記載されているHTMLの記述例をすべて覚える必要は全くありません。

当記事で紹介するものだけ覚えておけば大丈夫です。

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

他のウェブサイトの文章を引用する場合には <blockquote> を使用します。

具体的なHTMLの書き方は次のとおりです。


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

参考情報

W3C:HTML 5.2: 4.4. Grouping content「EXAMPLE15」

<blockquote>の書き方を具体例で説明

たとえば、次のような情報を自身のウェブサイトに引用するとします。

引用する文章

これは、文章を引用する場合のHTMLの書き方を説明するためのサンプル文章です。文章を引用する場合には「blockquote」を使用してください。


引用元のウェブページの情報

  • ページタイトル:文章を引用する時のHTMLの書き方
  • ページ URL:https://tk-create.com/blockquote-q/

この場合の <blockquote> の書き方は、次のようになります。


            <blockquote>
            <p> これは、文章を引用する場合のHTMLの書き方を説明するためのサンプル文章です。ここに引用する文章を記述します。</p>
            
            <footer>引用:<cite><a href="https://tk-create.com/blockquote-q/">文章を引用する時のHTMLの書き方</a></cite></footer>
            </blockquote>
        

<cite> について

<cite> には、引用元の情報を記述します。具体的には、次のような情報です。

書籍の場合

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

ウェブサイトの場合

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

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

<cite>を記述する際の注意点は、引用元以外の情報を <cite> の中に入れないことです。
たとえば「引用:」などのです。

イメージしづらいと思いますので、実際にHTMLで書いてます。


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

上記の例は、正しい<cite>の記述例です。
「引用:」が <cite> の外側にあるのがわかるかと思います。


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

上記の例は、間違った<cite>の記述例です。
「引用:」が <cite> の内側にあるため間違いです。

<footer> について

<blockquote> 内にある <footer> は、この引用情報に関するfooterという意味です。

したがって、引用しているウェブページの構造に影響を与えることはありません。そのため、自身のウェブページの文書構造がおかしくなるのでは?」といった心配は無用です。


ちなみに、<footer> は無くてもHTMLの文法上は問題ありません。

しかし、引用した文章と引用先の情報を明確に分けて表現するためには<footer>を使用した方が良い、と筆者は考えます。

参考情報

<footer>を使用しない<blockquote>の書き方↓

W3C:HTML 5.2:4.4. Grouping content「EXAMPLE16」

引用元のウェブページのURLについて

引用元がウェブページの場合でも、そのページのURLの記述は必須ではないようです。

参考情報

W3C:HTML 5.2:4.4. Grouping content「EXAMPLE15」

しかし、引用元がウェブページの場合は「ページURLをリンクとして記述する」ことを筆者はおすすめします。

その理由は、読者が引用元のページを見てみたいと思うことがあるからです。また、引用元のウェブサイトに敬意を払うという意味もあります。

したがって、引用元がウェブページの場合は「ページURLをリンクとして記述すること」を筆者はおすすめします。

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

次に、短い文章を引用する場合のHTMLの書き方について説明します。

ちなみに、短い文章(以下、フレーズと表現)とは、次のようなものです。

フレーズの具体例

SEOは Google対策である

そして、フレーズを引用する場合には <q> を使用して次のように記述します。


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

参考情報

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

<q>の書き方を具体例で説明

たとえば、次のような情報を自身のウェブサイトに引用するとします。

引用するフレーズ

SEOはGoogle対策である


引用元のウェブページの情報

  • ページタイトル:SEOの基本を初心者むけに分かりやすく説明
  • ページ URL:https://tk-create.com/seo/what-is-seo/

この場合の <q> を使ったHTMLの書き方は、次のようになります。


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

<cite> について

<cite>については、<blockquote>の時と同様に引用元の情報を記述します。

また、<cite>を記述する際の注意点についても<blockquote>の時と同様です。

したがって、ここでは<cite>についての詳しい説明は省略します。

<q cite = "ウェブページのURL"> について

<q cite = "ウェブページのURL"> の「ウェブページのURL」部分には、引用元のウェブページのURLを入力します。

引用元へリンクを貼る場合の<q>の書き方

当記事を書く際に参考にしたウェブページ「W3C」には、引用元へリンクを貼る場合の記述例はありませんでした。

したがって、引用元へリンクを貼る場合の正しいHTMLの書き方については不明です。しかし、おそらくは次のようなHTMLになるのではないか、と筆者は考えます。


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

【解説】<cite>タグのなかに引用元へのリンクを記述

このHTMLの書き方は、長い文章を引用する際に使用する<blockquote>の次の書き方をもとにしたものです。(下のコード参照)


                <blockquote>
                <p> これは、文章を引用する場合のHTMLの書き方を説明するためのサンプル文章です。ここに引用する文章を記述します。</p>
                
                <footer>引用:<cite><a href="https://tk-create.com/blockquote-q/">文章を引用する時のHTMLの書き方</a></cite></footer>
                </blockquote>
            

したがって、引用元へリンクを貼る場合のHTMLの書き方は、筆者の考える書き方で問題ないのではないか、と思います。

<blockquote>か<q>かで迷った場合

<blockquote>か<q>かで迷った場合は、どちらを使っても良いと思います。

その理由は、どちらのタグも「引用」ということを検索エンジンに伝えるという役割を持っているからです。

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

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

最後に、他のウェブサイトの画像を引用する場合のHTMLの書き方について説明します。

なお、ここまでに紹介したHTMLの書き方は 1つのケースに 1つでしたが、画像のみ 2つの書き方を紹介します。

2つ紹介する理由は、 2つの書き方が大きくことなるからです。

また、どちらの書き方の方が良いと筆者が考えているかも書いていますので、参考になればと思います。

<blockquote>を使用した書き方

一つ目の方法は、文書を引用する場合と同じく<blockquote>を使用した方法です。

具体的なHTMLの書き方は、次のとおりです。


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

参考情報

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

<figure>と<figurecaption>を使用した書き方

2つ目の方法は、<figure>と<figurecaption>を使用した方法です。

この方法は、画像の引用元情報をウェブページに表示したい場合に使用します。
具体的なHTMLの書き方は、次のとおりです。


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

参考情報

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

<cite> について

<cite>には、引用元の情報を記述します。文章を引用する際に記述する<blockquote>の時に書くものと同じと考えて問題ありません、

また、<cite>を記述する際の注意点についても<blockquote>の時と同様です。

したがって、ここでは<cite>についての詳しい説明は省略します。

筆者のオススメの書き方

画像を引用する場合のHTMLの書き方について 2つの方法を紹介しましたが、筆者のおすすめは、<figure>と<figurecaption>を使用する方法です。

理由は、引用元のウェブサイトに敬意を払うべき、という考えがあるからです。

写真を撮ったりイラストを作成するのは、非常に手間がかかる作業です。したがって、それを引用させてもらう場合には「引用元の情報」を可能な限り載せるべきです。

このような考えから、画像を引用する場合には、<figure>と<figurecaption>を使用した書き方を使う方が良いと筆者は考えています。


おわり

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

HTMLタグの書き方について興味のある方は、次の記事もぜひご覧ください。

— スポンサーリンク— 

— — —

当記事の内容が役にたったという方は、他の方に紹介していただけると嬉しいです。

タグ:

これからブログを始めたい人にオススメの記事

トップへ戻るボタン