Web制作初心者の方のなかには、「blockquoteタグとは何か気になっている」「blockquoteタグがいまいちよくわからない」などといった悩みがあるのではないでしょうか。
この記事では、blockquoteタグの概要や使い方、重要性、そしてSEO効果について解説していきます。この記事を読めば、blockquoteタグについて理解ができるため、知識をWeb制作に活かせるようになります。ぜひ最後までお読みください。
<無料>資料ダウンロード
【サイト運営者必見】SEO対策入門ガイド
SEO対策のポイントやメリット・デメリットを分かりやすく解説!
目次
blockquoteタグ(引用タグ)とは?
![blockquoteタグ(引用タグ)とは?](https://n-works.link/wp_2309/wp-content/uploads/2022/02/AdobeStock_269366088.jpeg)
blockquoteタグとは、他のサイトや文献から文章の一部を引用する際に使用するタグのことです。一般的にWebサイトのコンテンツはオリジナルであることが望ましいです。ただし、場合によってはそのままの文章を掲載した方が、ユーザーにとって伝わりやすいこともあるのです。
例えば、SEO施策について解説する際、Googleが発表しているガイドラインをそのままのテキストで読んでもらうと分かりやすいです。このような場合に、引用元を明記してコピペではないことを表明するためにblockquoteタグ(引用タグ)を使用します。
blockquoteタグが必要な理由
![blockquoteタグが必要な理由](https://n-works.link/wp_2309/wp-content/uploads/2022/02/AdobeStock_483630735.jpg)
blockquoteタグが必要なのは、以下のように2つの理由があるからです。
- コピーコンテンツではないことを示すため
- Webにおけるマナーであるため
ここからはそれぞれの理由について、詳細を解説していきます。
コピーコンテンツではないことを示すため
1つ目の理由は、コピーコンテンツではないことを示すためです。これは、検索エンジンを意識した考え方です。たとえ引用部分に「出典」や「引用」というテキストを添えてたとしても、検索エンジンはテキストを引用しているとは認識してくれません。そのため、コピーコンテンツとみなされてしまうのです。
そこで引用したことをblockquoteタグで表示することで、コピーコンテンツだと誤認されるのを防ぐことができます。検索エンジンにコピーコンテンツだと認識されてしまうと、ペナルティが発生したり、検索順位が下がってしまったりしてしまいます。自社サイトを上位に表示させるためにも、blockquoteタグは重要です。
Webにおけるマナーであるため
2つ目の理由は、Webにおけるマナーであるためです。これはユーザーを意識した考え方で、Webコンテンツは常にオリジナルであることが望ましいです。他社サイトのコンテンツを「引用」や「出典」などとソースを明かさずに使用した場合、コピペだと判断されてしまいます。
コピペを行っていることが判明すると、ユーザーに不信感を持たれてしまい、サイトだけでなく、運営会社の信用も失ってしまうのです。こうした考え方から、Webコンテンツ制作において、引用したものは引用したと表すのは重要なマナーだと言えます。そこで、検索エンジンには認識されないとしても、出典や引用元については明かす必要があるのです。
blockquoteタグによるSEO効果について
![blockquoteタグによるSEO効果について](https://n-works.link/wp_2309/wp-content/uploads/2022/02/AdobeStock_309938416.jpeg)
blockquoteタグがSEO効果を発揮するかどうかについては、直接的な効果はあまりないといわれています。しかし他のサイトからテキストを引用しているのにblockquoteタグを入れていないと、Googleからコピーコンテンツとしてみなされてしまうことがあります。上記でも触れたように、コピペを行なってしまうとサイトの掲載順位が下がってしまうため、非常に大きなハンデとなってしまうのです。
そこでblockquoteタグを用いてコピペではなく引用タグで示すことで、ユーザーに有益なコンテンツであることを証明することにつながります。以上を踏まえると、blockquoteタグは間接的にSEO効果があるといえます。
qタグやciteタグとの違いは?使い方やhtmlの書き方を紹介
![qタグやciteタグとの違いは?使い方やhtmlの書き方を紹介](https://n-works.link/wp_2309/wp-content/uploads/2022/02/AdobeStock_207532432.jpeg)
引用タグには以下のようにいくつかの種類があります。
- blockquoteタグ
- qタグ
- citeタグ
ここからは、それぞれのタグについて解説していきましょう。
ある程度まとまった文に使用するblockquoteタグ
blockquoteタグは、長い文章など、ある程度まとまったテキストに用いるタグです。例えば、以下のように記述します。
<blockquote cite=”https://n-works.link/services”>
<p>WEB サイトを作る目的は、お客様のビジネスの課題を解決することです。そのためには、ただサイトを構築するだけでなく、きちんとお客様のビジネスを理解した上で、WEB のプロとしてお客様の課題を解決する戦略の提案を行います。</p>
</blockquote>
すると以下のように表示されます。
![](https://n-works.link/wp_2309/wp-content/uploads/2022/02/image3-6.jpg)
この<blockquote cite=”https://n-works.link/services”></blockquote>というタグでは、引用サイトを明記しています。すると検索エンジンはどのサイトの文章を引用しているのか、認識してくれるのです。
短文に使用するqタグ
qタグは短い文章に用いられることが多いです。例えば、以下のように用いることができます。
<p>シェークスピアはこのような名言を残しています。<q>生きるべきか死すべきか、それが問題だ</q></p>
上記のタグは、以下のように表示されます。
![](https://n-works.link/wp_2309/wp-content/uploads/2022/02/image1-6.jpg)
このように、<q>生きるべきか死すべきか、それが問題だ</q>というタグを用いると、囲っている部分がクォーテーションマークで括られるようになります。こうすることで、文章のどの部分が引用されているのかが明確になります。
引用元の表示に使用するciteタグ
citeタグは引用元の表示に使用する際に使用されます。こちらのタグは単体で用いられることは少なく、多くの場合blockquoteタグと一緒に用いられます。例として、以下のように使用できます。
<blockquote cite=”https://n-works.link/services”>
<p>WEB サイトを作る目的は、お客様のビジネスの課題を解決することです。そのためには、ただサイトを構築するだけでなく、きちんとお客様のビジネスを理解した上で、WEB のプロとしてお客様の課題を解決する戦略の提案を行います。</p>
引用元:<cite><a href=”https://n-works.link/services”>サービス</a></cite>
</blockquote>
すると以下のように表示されます。
![](https://n-works.link/wp_2309/wp-content/uploads/2022/02/image2-6.jpg)
この<blockquote cite=”https://n-works.link/services”></blockquote>というタグは検索エンジン向けに記載しているのに対し、<cite><a href=”https://n-works.link/services“>サービス</a></cite>というタグでは、ユーザーがどこから引用しているのかが分かるようになっています。citeタグがあるとユーザーがソースを確認できるため、親切なサイトになります。
blockquoteタグは使いすぎに注意が必要
![blockquoteタグは使いすぎに注意が必要](https://n-works.link/wp_2309/wp-content/uploads/2022/02/AdobeStock_291984119.jpeg)
他のサイトや文献からテキストを引用した場合は、blockquoteタグを使うのがルールだと説明しました。しかし、blockquoteタグを使いすぎるのはよくありません。そのため、引用の際は注意が必要です。
その理由は、引用コンテンツが多いと自社のコンテンツは質が低い・内容が薄いという風に捉えられてしまうからです。引用テキストのつぎはぎでは、オリジナリティは発揮できません。そしてオリジナリティが低いと、結果的に検索エンジンからの評価も下がってしまうので、検索結果の上位表示も難しくなるでしょう。
そこで引用のしすぎを防ぐために、引用テキストは補足や根拠提示に使うようにしましょう。独自コンテンツを充実させることを優先し、引用テキストは説得力を持たせるための手段として捉えてください。
CSSで見た目の工夫をすることも重要
![CSSで見た目の工夫をすることも重要](https://n-works.link/wp_2309/wp-content/uploads/2022/02/AdobeStock_104130005.jpeg)
CSSを用いて、視覚的に引用だとわかるように工夫することも重要です。先ほど引用サイトを表示させるためのタグについて紹介しました。ただし他のテキストと同じように表示してしまうと、ユーザーが見逃してしまう可能性があります。ユーザーが一目で引用だと分かるようにするためにも、CSSで表示デザインを変えることが望ましいです。
引用されるようなコンテンツ作りも意識しよう
![引用されるようなコンテンツ作りも意識しよう](https://n-works.link/wp_2309/wp-content/uploads/2022/02/AdobeStock_90979661.jpeg)
他のサイトのテキストを引用するだけでなく、自サイトのコンテンツが引用されるようなものにすることも重要です。というのも、他のサイトからテキストを引用されると、被リンク獲得につながります。被リンクが増えるということは、検索エンジンから別のサイトから参照されていると認識されるため、サイトの評価が高まるのです。このように、引用されるようなコンテンツを作ると、SEO効果が期待できます。
blockquoteタグのまとめ
![blockquoteタグのまとめ](https://n-works.link/wp_2309/wp-content/uploads/2022/02/AdobeStock_284687009.jpeg)
この記事では、blockquoteタグの概要や使い方について解説していきました。blockquoteタグとは他のサイトや文献から文章の一部を引用する際に使用するタグのことで、コピペではないことを証明するために重要な役割を果たしています。そして引用タグには3つの種類があり、シチュエーションに応じて使い分けることが大切です。
ただし、blockquoteタグを使いすぎてしまうと、オリジナリティに欠けたサイトになってしまいます。すると結果的に検索エンジンからの評価も下がってしまうため、検索結果の上位表示も難しくなります。そこでオリジナリティのあるコンテンツにすることを優先しましょう。また、他のサイトが引用したくなるような、充実したコンテンツ作りもSEO施策には大切です。
<無料>資料ダウンロード
【成果に直結】Webサイトコンサルティング
Webのプロが成果の出るWebサイトへ改善いたします