minablog

hugo/github/wordpress/プログラミング言語/美容/ビジネス/マーケティングなど、ミレニアム世代やZ世代に有益な情報を共有するブログ。

小学生でもわかるHTML/CSSタグ講座 linkタグ

皆さんこんにちは!

minablog管理人のみなです。

小学生でもわかるHTML/CSSタグ講座の今回はlinkタグについてご紹介します。

linkタグはhead内に書くものなので、以前紹介したmetaタグと似たような感じのタグになりますが、metaタグよりはややこしくないかも…。

ということで、今回はlinkタグについてご紹介します!

 

metaタグ講座はこちら。

www.mkmkblog.site

 

 

linkタグとは?

linkタグとはWebページの情報を検索エンジンやブラウザに伝えるタグです。

 

《linkタグの特徴》

①linkタグは検索エンジンやブラウザに向けて書く。

 (Googleなどの検索エンジン/ブラウザ/SNS

②サイト訪問者がlinkタグを見ることはほとんどなし。

③linkタグは検索エンジンやブラウザに指示を出したり、情報を提供する。

④head内に書く。

 

linkタグと混同しやすいタグとして、aタグが挙げられます。

どちらも画像やファイルを読み込むことができますが、記述する場所が決定的に違います!

・head内に書くのがlinkタグ

・body内に書くのがaタグ

このように覚えましょう。

f:id:mkmkblog:20191217165820j:plain

linkタグ一覧

とても大切なlinkタグで、ほとんどの場合に必ず記述します。

なぜなら、CSSファイルの読み込みが必要だからです。

スタイルシートとはCSSを記述しているシートのことで、見た目が整っているサイトには必ずスタイルシートが読み込まれています。

書いているHTMLに合わせてCSSも書いている方は必ず書きましょう。

hrefの後ろはスタイルシートのURLを書き込んでください。

 

これはサイトのアイコンを指定するタグで、アイコンを用意している方は記述しましょう。

アイコンデータについてはpngやjpg、icoなどが使えますが、一番簡単なのはicoデータです。

icoデータの場合は<type="※">の記述は必要ないので、画像URLとサイズを指定するだけでOKです。

pngやjpgの場合は<type="※">の部分に”image/png”もしくは”image/jpg”の記述が必要になります。

なお、ai,pdf,EPSは使えませんので注意しましょう。

 

そして複数のサイズ指定をすることが可能なので、

sizes="192×192"

sizes="300×300"

と、このようにサイズ毎に指定するようにしましょう。

 

こちらの方が詳しく書いていました。

このページで割愛しているスマホ用アイコンの記述も書かれています。

webdesign-trends.net

 

そのページの前後のページを指定する要素です。

特に前後のページを指定しなくてもよい場合や、1ページしかない場合には記述する必要がありません。

prev:前ページ

next:後ページ

となりますので、下記のとおり前ページと後ろページで合計2回このタグを書きましょう。

<link rel="prev" href="前ページURL">

<link rel="next" href="後ページURL">

 

RSSリーダーがそのサイトのRSSフィードを見つけられるようにするためのタグです。

RSSフィードとは、そのサイトの最新情報を受け取ることができるようにするためのもので、RSSリーダーが最新情報を読み取ります。

RSSを理解するのはかなり難しく時間もかかります。

はてなブログユーザーであれば深く理解しなくても大丈夫だと思いますが、詳しく覚えたい方はこちらのサイトをどうぞ。

www.asobou.co.jp

 

これはSEO対策としても有効なコードになります。

このコードを書くことによって正規ページのURLを宣言できますので、正規ページでも非正規ページでも記述することをおススメします。

f:id:mkmkblog:20191217165850j:plain

まとめ

今回はlinkタグについてコードをまとめてみました!

ぶっちゃけここに書いてある以外にも種類はありますが、この辺が代表的なものかなと思います。

もしスペルミスをしていたら教えていただければ幸いです。

今回も見ていただいてありがとうございましたー!

 

関連するブログ

・swatanabe's diary さん

swatanabe.hatenablog.com

正規URLの宣言について詳しく書かれているページです。

ぜひ知識を深めたい方はご覧ください♪