HTML link rel生成ツールとは
HTMLのlinkタグは、ページを別のリソースに接続したり、ドキュメントのhead内で関係性を宣言したりします。開発者はlinkタグをcanonical URL、言語の代替、アイコン、事前読み込みヒント、事前接続ヒント、スタイルシートなどに使用します。このツールは、as、type、href、crossoriginなどの属性を正しい位置に保つのに役立ちます。
クイックアンサー
必要な属性を推測することなく、preload、preconnect、dns-prefetch、canonical、代替URL用の有効なHTML linkタグを作成します。rel値ごとにas、type、crossoriginなどの固有の要件があります。
Last updated: 2026-06-11
制限事項
- as属性はpreloadリンクに必須です。これがないと、ブラウザは事前読み込みされたリソースを優先順位付けしたり、適切なコンテンツセキュリティポリシーを適用したりできません。
- あまりに多くのリソースをpreloadすると逆効果で、実際の重要なコンテンツの読み込みを遅らせる可能性があります。preloadヒントはページごとに1〜3つの重要なリソースに制限してください。
- crossorigin属性はフォントや他のクロスオリジンリソースの事前読み込みに必須です。省略すると、ブラウザによって事前読み込みが破棄されます。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- 必要な関係性やブラウザヒントに一致するrel値を選択します。
- hrefパスまたはURLを入力します。
- 選択したrel値に該当する場合のみ、as、type、crossoriginを追加します。
- 生成されたタグをHTMLのheadセクションにコピーします。
主な用途
- フォント、スクリプト、画像、スタイルシートのpreloadタグを作成する。
- サードパーティオリジンにpreconnectまたはdns-prefetchを追加する。
- as、type、crossorigin属性を忘れずにlinkタグを構築する。