ブログやサイト制作をしていると、他のサイトや文献から文章や画像を引用をすることがあると思います。
そんな時、コピぺで使ってしまうと、SEOの観点からコピーコンテンツだと判断されてしまいます。
引用文であるとGoogleやユーザーに示すために引用タグを使い、本文と区別出来るようにしましょう。

そこで今回は、引用タグの使い方をご紹介します。

引用タグとは？

他のサイトや文献からの引用、転載であることを示すタグです。

引用タグの使い方

blockquoteタグにcite属性を記載して、引用元のURLを指定します。
citeタグは、引用元のURL、サイト名や作者を記載します。
また、citeタグには、イタリックが適用されているので、斜体になります。

HTML
<blockquote cite="引用元URL">
    <p>引用する文章</p>
    <cite><a href="引用元URL">引用元：引用元サイト名</a></cite>
</blockquote>

CSS
blockquote {
    background:#f6f6f6;
    padding: 3.6rem 2.2rem;
    position: relative;
}
blockquote::before, blockquote::after {
    color: #C8C8C8;
    font-family: serif;
    position: absolute;
    font-size: 600%;
}
blockquote::before {
    content: "“";
    line-height: 1;
    left: 15px;
    top: 10px;
}
blockquote::after {
    content: "”";
    line-height: 0;
    right: 15px;
    bottom: 10px;
}
blockquote cite {
    font-size: 90%;
    text-align:right;
    display:block;
}

実装結果

Appleの共同創業者の一人であり、同社のCEOを務めた。NeXTやピクサー・アニメーション・スタジオの創業者でもあり、ウォルト・ディズニー・カンパニーなどの役員を歴任した。AppleⅡなどによりパーソナルコンピュータ（パソコン）の概念を市場に普及させ、iPodとiTunes/iTunes Storeによって音楽業界に変革をもたらし、iPhoneおよびiPadを世に送り出したと評される。

引用元：ウィキペディア

qタグの使い方

qタグは短い文章の際に使います。

HTML
<p>スティーブ・ジョブズはこのような名言を残しています。<q>ハングリーであれ。愚か者であれ。</q></p>

スティーブ・ジョブズはこのような名言を残しています。ハングリーであれ。愚か者であれ。
自動で括弧が付きます。

いかがでしょうか。
引用する際はコピペするだけでなく、本文と引用文が区別できる様にマークアップしましょう。

他にもあるよ。関連記事

• HTMLで印刷ボタンを設置する方法
• 【CSS】メイン画像に使える。画像をゆっくり拡大させる方法
• 【jQuery】可視領域に入ると蛍光ペンが伸びるアニメーション