【入門編】aタグのrel属性によるSEOとセキュリティ制御 – HTML実践ガイド

こんにちは！フロントエンドの世界へようこそ。Web制作を学び始めると、「リンクを貼る」という作業は一番最初に覚えるワクワクするステップですよね。

大丈夫です！今日は、この`rel`属性という「リンクの裏側に隠された司令塔」について、専門用語を極力使わずに、日常の風景に例えて解説していきますね。これをマスターすれば、あなたのサイトはSEO（検索エンジン対策）もセキュリティもバッチリな「信頼されるWebサイト」に一歩近づきますよ！

—

`rel`属性（リレーション属性）を一言でいうと、「そのリンク先と、自分（自分のサイト）との関係性を教えてあげるメモ」のことです。

例えば、あなたが街で友達に「あそこのパン屋さん、すごく美味しいよ！」と紹介する場面を想像してください。

検索エンジンのクローラー（Webサイトを巡回するロボット）は、リンクを見つけると「このリンクをたどって評価を渡すべきか？」を考えます。その時に、この「メモ」が判断材料になるんです。

—

現在、特に覚えておくべき`rel`属性は以下の3つです。これさえ知っておけば、現場で困ることはまずありません！

一番有名なのがこれ。「この先は僕のサイトの評価を渡したくないな」「信頼できるか分からないサイトだな」という時に使います。

お金をもらって紹介しているリンクには、Googleから「これは広告ですよ」と明示するように推奨されています。これを付けることで、純粋なリンクと広告を区別してくれます。

`UGC`とは「User Generated Content」の略で、ユーザーが投稿したコンテンツという意味。ブログのコメント欄やSNSの投稿など、ユーザーが勝手に貼ったリンクにはこれを使いましょう。

—

それでは、実際にコードを書いてみましょう。WordPressやHTMLファイルに貼り付ける時のイメージで見てみてくださいね。

「`rel`を付けないと怒られるの？」と不安になるかもしれませんね。結論から言うと、怒られません！

基本的には、普通のリンクには何も付けなくて大丈夫です。でも、「あ、これは自分が責任を持てないリンクだな」とか「これは広告だな」と気づいた時に、そっとこの属性を添えてあげる。その「ちょっとした気遣い」が、検索エンジンからの信頼に繋がっていくんです。

—

Webサイトにリンクを貼ることは、自分の街に「他の街への道路」を作るようなものです。

しっかり管理された道路なら、みんな安心して通れますよね。逆に、怪しい場所へ繋がる道路を無防備に作り続けると、自分の街の評判も下がってしまうかもしれません。

`rel`属性は、そんなあなたのWebサイトという大切な街を守るための「看板」や「注意書き」なんです。難しく考えすぎず、まずは「このリンクは、どんな性質のものかな？」と一呼吸おいて考える習慣をつけてみてくださいね。

皆さんのWeb制作ライフが、今日から少しだけ楽しく、そして自信を持って進められるものになりますように。応援しています！