HTML5における重要なタグが「linkタグ」です。
これは、linkタグを記述する文書ファイル(≒htmlファイル)に関係する別の文書ファイルを指定して、呼び出す(定義する)ものになっています。
似たhtml要素に「aタグ」が存在しますが、こちらはlinkタグが<head>～</head>内に記述するのに対して、<body>～</body>内に記述して外部リンクを記述します。
html要素として必要不可欠なheadタグとbodyタグの違いとは
そのため、両者を混同することが最初よくあったので、まとめておきます。
html文書の情報(メタデータ)を指定するmetaタグの使い方と主な属性まとめ
<head>～</head>内で関連する文書の定義を記述する<link>タグの使い方と頻出な属性とは
全ての属性やその中身を覚える必要は全くありません。
以下、SEO対策をそれなりに行っている当サイトで使用している、<link>タグ一覧です。
<link rel='stylesheet' id='open-sans-css' href='https://fonts.googleapis.com' type='text/css' media='all'/> <link rel="icon" href="https://programing.me/32x32.png" sizes="32x32"/> <link rel="apple-touch-icon-precomposed" href="https://programing.me/180x180.png"/> <link rel='subresource' id='animate-css' href='https://programing.me/animate.min.css' type='text/css' media='all'/>
※長いリンク指定は省略しています。
「rel」と「href」属性が最重要
<link rel='文書ファイルとの関係を定義' id='飛び先' href='文書ファイルの置いてあるURL' type='文書ファイルの形式' media='出力先指定'/>
まず、href属性は指定する文書のURLを指定する属性です。
そしてrel属性は、href属性の指定先に置かれている文書ファイルとの関係を宣言しているものになります。
例えば当サイトの例(上記例)では、rel=”stylesheet”と指定してCSSファイルを呼び出していることを示しています。
# type要素は文書ファイルの形式を、media属性はどこに呼び出すファイルを出力するかを定義します。
ウェブサイトに必須のファビコン・アップルタッチアイコンを指定するrel属性の１つが「icon」「apple-touch-icon-precomposed」
<link rel="icon" href="https://programing.me/32x32.png" sizes="32x32"/> <link rel="apple-touch-icon-precomposed" href="https://programing.me/180x180.png"/>
上記のように、rel属性にicon or apple-touch-icon-precomposedと指定することで、サイトのファビコン(アイコン)やスマホのホーム画面用のアップルタッチアイコンの画像ファイルを指定することが出来ます。
rel=”subresource“でcssファイルの遅延呼び出しを行っている
最後に、こちらはほとんどのサイトで行う必要は無いと思いますが、Googleがページの表示速度を検索エンジンの順位の要素に組み込んでいるため、当サイトでも高速化の施策は行っています。
rel属性にsubresourceと指定することにより、cssファイルを遅延して呼び出しています。
※当サイトで遅延呼び出しを行っているcssファイルは、アニメーションに関するcssです。
他にも様々な属性がありますが、正直全部覚える必要は無く必要に応じて調べればいいです。
