外部linkを別tabで開くときはnoopenerを付ける前に読者が残る理由を決める

外部linkを別tabで開くときは、先に「読者を今のpageへ残す必要があるか」を決めます。資料の原典を確認して戻りたい、申込み先を別siteで開く、地図を見ながら会社案内を読みたいといった場合には、別tabで開く理由があります。すべての外部linkを機械的に別tabへ送る必要はありません。別tabを作ることと、読者に親切であることは同じではありません。

新しい閲覧画面を開くlinkには、target="_blank"を使えます。この場合、link先のpageと元のpageの関係も考えます。HTML 5.1では、rel="noopener"を指定して閲覧画面を分けるためのlink typeが追加されました。また、noreferrerはlinkをたどるときにreferer情報を送らず、新しい閲覧画面を作る場合にはopenerをnullにするものとして定義されています。二つの指定を、検索順位のための記号や単なるおまじないとして扱いません。

別tabを開く理由とlink先の役割を分ける

外部linkには、読者が現在の説明を読み終えてから進むものと、読んでいる途中で確認したいものがあります。前者なら、同じtabで移動しても問題がない場合があります。後者なら、元の説明を残しておけるように別tabを開く意味があります。linkのURLが外部か内部かだけで決めず、読者が何を行き来するかで考えます。

たとえば、サービスの料金条件を説明するpageから、行政機関の制度ページへlinkを張る仮例を考えます。制度の原文を確認してから説明へ戻ってほしいなら、別tabにする理由があります。一方、問い合わせpageの中にあるプライバシーポリシーへのlinkは、内容を読んで同意するための導線です。別tabにするかは、formへ戻る必要、説明の長さ、読者が途中で失う情報を見て決めます。

「外部siteへ出したくない」という都合だけで別tabにすると、読者は開いた画面を管理しにくくなります。mobileではtabの切替が分かりにくいこともあります。新しい画面が開くことを、linkの文言や周囲の説明から予想できるようにします。link先がPDF、download、予約site、決済siteのどれなのかも、押す前に分かる方がよいでしょう。

反対に、外部siteへ進むのに現在のpageを失わせないため、別tabを選ぶことがあります。この場合も、link先の内容、運営者、更新状況までは保証できません。元pageに残すべき説明は元pageへ書き、外部linkはその根拠や手続き先として使います。linkを張ったことだけで、説明の責任まで外へ渡しません。

targetとrelの役割を混同しない

target="_blank"は、link先を新しい閲覧画面へ開くための指定です。これだけでは、refererを送るか、閲覧画面の関係をどう扱うかまでは、別の判断になります。noopenerは新しい閲覧画面を分けるための指定であり、link先を信用しているかどうかを示す言葉ではありません。

noreferrerは、linkをたどるときのreferer情報を送らないための指定です。閲覧画面が新しく開く場合には、openerをnullにする効果も定義されています。そのため、noopenerとnoreferrerを同じ理由で並べるのではなく、何を分けたいのかを確認します。閲覧画面の関係を分けるのか、refererを渡さないのか、両方なのかを分けます。

nofollowも別の意味を持ちます。HTML 5.1では、link先を著者または発行者が支持しない場合や、商業的な関係を主な理由として含めたlinkを示すannotationとして説明されています。別tabで開くこと、refererを渡さないこと、linkを支持しないことは、同じ指定ではありません。一つのrelへ語を加える前に、それぞれの目的があるかを確かめます。

たとえば、外部の予約siteを別tabへ開き、元のサービス説明を残したいとします。ここで必要なのは、読者が予約siteへ進むことを理解できる案内と、新しい閲覧画面の関係をどう扱うかです。予約siteのURLを渡さない理由がなければ、noreferrerを付ける判断とは別になります。逆に、refererを渡さない理由があるなら、計測や相手側での確認に影響し得ることも、関係者が理解しておく必要があります。

linkを増やす前に管理する場所を決める

外部linkは、pageごとに手で増やすと、後で見直す場所が分からなくなります。headerやfooterの共通menu、本文中の出典、sidebarの案内、広告のlink先は、更新する人や確認方法が違います。どこにあるlinkなのかを分け、外部siteのURL、用途、別tabにするか、見直す人を記録します。

制作会社へ修正を頼む場合は、「外部linkを全部別tabにしてください」と一括で渡さない方がよいでしょう。問い合わせformの規約、資料download、SNS、地図、予約service、出典では、読者が戻る必要も扱う情報も違います。会社側は、linkの目的と公開範囲を決めます。制作側は、変更したpage、link先、開き方、確認したbrowserを返します。

仮にfooterのSNS linkを別tabへ開くようにした場合でも、本文中の出典linkまで同じ扱いにする必要はありません。共通部分へ一つの方針を適用することと、site内のすべてのlinkを同じ動きにすることは別です。編集しやすさだけで決めると、読者が読む順序を壊します。

外部serviceを終了したときも、linkの管理が必要です。予約siteの契約を終えた、SNS accountを閉じた、資料の公開先を替えた場合に、どのpageから案内しているかをたどれなければ、読者は使えない入口へ進みます。linkを追加する作業と、linkを外す作業を同じ一覧へ残します。

公開後は操作と戻り方を確かめる

codeを入れたあと、HTMLの記述だけを見て終わらせません。PCと手元のmobileでlinkを押し、新しいtabが開くか、元のpageへ戻れるか、link先が予定どおりかを確認します。link先のpageが開かなければ、relの指定を見直す前に、URLと外部serviceの状態を確認します。

外部linkの表示も見ます。text linkなら、どのpageへ進むかを読めるかを確認します。画像だけをlinkにしているなら、画像が読み込めない場合にも目的が伝わるかを見ます。新しいtabが開くなら、そのことを必要な範囲で示します。読者が操作を予想できれば、戻るためにbrowserの履歴を探す負担を減らせます。

最初の一手は、外部linkを一つ選び、「なぜ元pageを残すのか」を一文で書くことです。その答えがなければ、別tabはまだ必要ありません。答えがあるなら、target、noopener、noreferrerを、それぞれの目的に合わせて選びます。属性を増やす前に、読者がlinkの前後で何をするかを決めます。