HTMLでリンクを別タブで開く方法｜初心者でもすぐできるtargetの使い方

html

ホームページやブログを作っているときに、以下のような困った経験はありませんか？

「リンクをクリックしたら同じページで開いてしまい、元のページに戻るのが面倒…」 「参考サイトへのリンクで訪問者が離脱してしまう」 「複数のページを比較して見てもらいたいのに、一つずつしか見られない」 「外部サイトに飛んだ後、なかなか戻ってきてもらえない」

このような問題を解決するのが、リンクを別タブ（新しいウィンドウ）で開く設定です。

適切に設定することで、訪問者はあなたのサイトを開いたままで他のサイトも見られるようになり、ユーザビリティが大幅に向上します。

この記事では、HTMLでリンクを別タブで開くための基本的な方法から、SEO対策やアクセシビリティへの配慮まで、初心者向けにわかりやすく詳しく解説します。これを読めば、訪問者に優しく、かつ安全なリンクを作れるようになりますよ。

スポンサーリンク

HTMLリンクの基礎知識

aタグの基本構造

HTMLでリンクを作成する際は、<a>タグ（anchor tag）を使用します：

<a href="リンク先URL">表示されるテキスト</a>

基本的なリンクの例

<!-- 外部サイトへのリンク -->
<a href="https://www.google.com">Googleで検索</a>

<!-- 同じサイト内のページへのリンク -->
<a href="/about.html">会社概要</a>

<!-- メールアドレスへのリンク -->
<a href="mailto:contact@example.com">お問い合わせ</a>

<!-- 電話番号へのリンク -->
<a href="tel:03-1234-5678">電話をかける</a>

通常のリンクの動作

デフォルトでは、リンクをクリックすると同じタブで開きます：

<a href="https://example.com">このリンクは同じタブで開きます</a>

リンクを別タブで開く基本的な方法

target属性の使用

リンクを別タブで開くには、target属性に_blankを設定します：

<a href="https://example.com" target="_blank">別タブで開くリンク</a>

targetの値の種類

値動作用途
_blank新しいタブ/ウィンドウで開く外部サイトへのリンク
_self同じタブで開く（デフォルト）同じサイト内のリンク
_parent親フレームで開くフレーム使用時
_top最上位ウィンドウで開くフレーム使用時
フレーム名指定したフレームで開く特定のフレーム指定

実際の使用例

<!-- 外部サイトへのリンク -->
<a href="https://www.wikipedia.org" target="_blank">Wikipedia（別タブで開く）</a>

<!-- PDFファイルへのリンク -->
<a href="/documents/manual.pdf" target="_blank">マニュアルPDF（別タブで開く）</a>

<!-- 画像ファイルへのリンク -->
<a href="/images/photo.jpg" target="_blank">写真を拡大表示（別タブで開く）</a>

セキュリティ対策：rel=”noopener”の重要性

なぜセキュリティ対策が必要か

target="_blank"だけを使用すると、以下のセキュリティリスクがあります：

window.openerによる脆弱性

// リンク先のサイトで以下のようなコードが実行される可能性
window.opener.location = "https://malicious-site.com";

これにより、元のページが悪意のあるサイトにリダイレクトされる可能性があります。

rel=”noopener”による対策

<a href="https://example.com" target="_blank" rel="noopener">
  安全な別タブリンク
</a>

rel属性の値の種類

値効果使用場面
noopenerwindow.openerアクセスを防ぐtarget=”_blank”使用時（必須）
noreferrerリファラー情報を送信しないプライバシー保護時
nofollow検索エンジンにリンクを辿らせないSEO対策時
sponsored広告リンクであることを示す広告・PR記事
ugcユーザー生成コンテンツであることを示すコメント欄など

推奨される書き方

基本形（最も安全）

<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">
  外部サイト
</a>

rel属性の組み合わせ例

<!-- プライバシーを重視する場合 -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  プライバシー保護リンク
</a>

<!-- SEO対策を重視する場合（信頼できないサイト） -->
<a href="https://untrusted-site.com" target="_blank" rel="noopener nofollow">
  信頼性不明なサイト
</a>

<!-- 広告リンクの場合 -->
<a href="https://advertiser.com" target="_blank" rel="noopener sponsored">
  広告：スポンサーサイト
</a>

使い分けのガイドライン

別タブで開くべきリンク

外部サイトへのリンク

<!-- ✅ 推奨：外部サイトは別タブで -->
<a href="https://www.youtube.com/watch?v=example" target="_blank" rel="noopener">
  YouTube動画を見る
</a>

<!-- ✅ 推奨：参考サイト -->
<a href="https://developer.mozilla.org" target="_blank" rel="noopener">
  MDN Web Docs
</a>

ダウンロードファイル

<!-- ✅ 推奨：PDFファイル -->
<a href="/documents/report.pdf" target="_blank" rel="noopener">
  レポートをダウンロード
</a>

<!-- ✅ 推奨：画像ファイル -->
<a href="/gallery/high-res-photo.jpg" target="_blank" rel="noopener">
  高解像度画像を表示
</a>

ツールやアプリケーション

<!-- ✅ 推奨：Webアプリケーション -->
<a href="https://maps.google.com" target="_blank" rel="noopener">
  Google Mapsで確認
</a>

同じタブで開くべきリンク

サイト内ナビゲーション

<!-- ✅ 推奨：サイト内リンクは同じタブで -->
<a href="/about.html">会社概要</a>
<a href="/contact.html">お問い合わせ</a>
<a href="/blog/">ブログ一覧</a>

メインコンテンツ

<!-- ✅ 推奨：記事詳細ページ -->
<a href="/articles/how-to-cook-pasta.html">パスタの作り方</a>

<!-- ✅ 推奨：商品詳細ページ -->
<a href="/products/laptop-model-x.html">ノートPC詳細</a>

判断に迷う場合

ユーザーの意図を考慮

<!-- 比較検討が必要な場合は別タブ -->
<a href="/products/compare.html" target="_blank" rel="noopener">
  商品比較ページ
</a>

<!-- 長時間の作業が予想される場合は別タブ -->
<a href="https://online-editor.example.com" target="_blank" rel="noopener">
  オンラインエディターを開く
</a>

ユーザビリティの向上

視覚的な表示の工夫

CSSでの外部リンク表示

/* 外部リンクにアイコンを表示 */
a[target="_blank"]::after {
  content: " ↗";
  font-size: 0.8em;
  opacity: 0.7;
}

/* または画像アイコンを使用 */
a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  background-image: url('external-link-icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

Font Awesomeを使用した例

<!-- Font Awesomeのアイコンを使用 -->
<a href="https://example.com" target="_blank" rel="noopener">
  外部サイト <i class="fas fa-external-link-alt"></i>
</a>

アクセシビリティへの配慮

スクリーンリーダー対応

<!-- aria-labelで説明を追加 -->
<a href="https://example.com" 
   target="_blank" 
   rel="noopener"
   aria-label="外部サイトexample.com（別タブで開きます）">
  詳細情報
</a>

<!-- 視覚的に説明テキストを追加 -->
<a href="https://example.com" target="_blank" rel="noopener">
  詳細情報
  <span class="sr-only">（別タブで開きます）</span>
</a>

sr-onlyクラスの定義

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

タイトル属性の活用

<a href="https://example.com" 
   target="_blank" 
   rel="noopener"
   title="外部サイトが別タブで開きます">
  参考サイト
</a>

SEO（検索エンジン最適化）への影響

Googleの評価基準

ユーザーエクスペリエンスの向上

適切にtarget="_blank"を使用することで：

  • 直帰率の改善：元のページに戻りやすくなる
  • 滞在時間の延長：複数ページを同時に閲覧可能
  • ユーザビリティ向上：より良い体験の提供

rel=”nofollow”との組み合わせ

<!-- 信頼できない外部サイトの場合 -->
<a href="https://untrusted-site.com" 
   target="_blank" 
   rel="noopener nofollow">
  参考サイト（注意：内容を保証しません）
</a>

内部リンクへの影響

サイト内での適切な使用

<!-- ❌ 避けるべき：通常のナビゲーション -->
<a href="/about.html" target="_blank">会社概要</a>

<!-- ✅ 推奨：比較が必要な場合のみ -->
<a href="/products/detailed-specs.html" target="_blank" rel="noopener">
  詳細スペック表（比較用）
</a>

実装における注意点

よくある間違いと対策

1. rel属性の忘れ

<!-- ❌ セキュリティリスクあり -->
<a href="https://example.com" target="_blank">外部サイト</a>

<!-- ✅ 正しい書き方 -->
<a href="https://example.com" target="_blank" rel="noopener">外部サイト</a>

2. 過度な使用

<!-- ❌ サイト内リンクで不必要に使用 -->
<nav>
  <a href="/home.html" target="_blank">ホーム</a>
  <a href="/about.html" target="_blank">会社概要</a>
  <a href="/contact.html" target="_blank">お問い合わせ</a>
</nav>

<!-- ✅ サイト内は通常のリンク -->
<nav>
  <a href="/home.html">ホーム</a>
  <a href="/about.html">会社概要</a>
  <a href="/contact.html">お問い合わせ</a>
</nav>

3. JavaScriptでの制御

// ❌ セキュリティリスクのある方法
function openInNewTab(url) {
  window.open(url, '_blank');
}

// ✅ 安全な方法
function openInNewTab(url) {
  const newWindow = window.open(url, '_blank');
  newWindow.opener = null;
}

ブラウザ対応状況

モダンブラウザでの対応

<!-- 最新ブラウザでは自動的にnoopenerが適用される -->
<a href="https://example.com" target="_blank">
  最新ブラウザでは安全
</a>

<!-- ただし明示的に書くことを推奨 -->
<a href="https://example.com" target="_blank" rel="noopener">
  すべてのブラウザで安全
</a>

高度な実装例

動的なリンク生成

JavaScriptでの実装

function createSafeExternalLink(url, text) {
  const link = document.createElement('a');
  link.href = url;
  link.textContent = text;
  link.target = '_blank';
  link.rel = 'noopener noreferrer';
  
  // 外部リンクアイコンを追加
  const icon = document.createElement('span');
  icon.innerHTML = ' ↗';
  icon.style.fontSize = '0.8em';
  link.appendChild(icon);
  
  return link;
}

// 使用例
const externalLink = createSafeExternalLink(
  'https://example.com', 
  '外部サイト'
);
document.body.appendChild(externalLink);

条件付きでtarget=”_blank”を適用

document.addEventListener('DOMContentLoaded', function() {
  // すべてのリンクをチェック
  const links = document.querySelectorAll('a[href]');
  
  links.forEach(link => {
    const url = new URL(link.href, window.location.origin);
    
    // 外部リンクの場合
    if (url.hostname !== window.location.hostname) {
      link.target = '_blank';
      link.rel = 'noopener noreferrer';
      
      // 視覚的インジケーターを追加
      if (!link.querySelector('.external-icon')) {
        const icon = document.createElement('span');
        icon.className = 'external-icon';
        icon.innerHTML = ' ↗';
        icon.style.fontSize = '0.8em';
        link.appendChild(icon);
      }
    }
  });
});

WordPress等CMSでの実装

WordPressフィルターでの自動化

// functions.phpに追加
function add_target_blank_to_external_links($content) {
    $content = preg_replace_callback(
        '/<a[^>]+href=["\']([^"\']+)["\'][^>]*>/',
        function($matches) {
            $url = $matches[1];
            
            // 外部リンクかどうかチェック
            if (filter_var($url, FILTER_VALIDATE_URL) && 
                parse_url($url, PHP_URL_HOST) !== $_SERVER['HTTP_HOST']) {
                
                // target="_blank"とrel="noopener"を追加
                if (strpos($matches[0], 'target=') === false) {
                    $link = str_replace('>', ' target="_blank">', $matches[0]);
                }
                if (strpos($matches[0], 'rel=') === false) {
                    $link = str_replace('>', ' rel="noopener noreferrer">', $link);
                }
                return $link;
            }
            
            return $matches[0];
        },
        $content
    );
    
    return $content;
}

add_filter('the_content', 'add_target_blank_to_external_links');

パフォーマンスへの影響

ページの読み込み速度

大量のリンクがある場合

<!-- ページ速度に影響する可能性がある大量のリンク -->
<div class="link-list">
  <!-- 1000件のリンクがある場合 -->
</div>

最適化の方法

// 遅延読み込みでパフォーマンス向上
function optimizeExternalLinks() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const link = entry.target;
        if (!link.hasAttribute('data-processed')) {
          // 外部リンクの処理を実行
          processExternalLink(link);
          link.setAttribute('data-processed', 'true');
          observer.unobserve(link);
        }
      }
    });
  });

  document.querySelectorAll('a[href^="http"]').forEach(link => {
    observer.observe(link);
  });
}

まとめ

HTMLでリンクを別タブで開く方法について、基本から応用まで詳しく解説しました。

重要なポイント

基本的な実装

  • target=”_blank”：別タブで開く
  • rel=”noopener”：セキュリティ対策（必須）
  • rel=”noreferrer”：プライバシー保護（推奨）

使い分けの原則

  • 外部サイト：別タブで開く（target=”_blank”使用）
  • ダウンロードファイル：別タブで開く
  • サイト内ナビゲーション：同じタブで開く（target属性なし）

ユーザビリティの向上

  • 視覚的表示：外部リンクアイコンの追加
  • アクセシビリティ：スクリーンリーダー対応
  • SEO対策：適切なrel属性の使用

ベストプラクティス

  1. 安全性の確保：必ずrel=”noopener”を使用
  2. 適切な判断：本当に別タブが必要かを検討
  3. ユーザー体験：予期しない動作を避ける
  4. アクセシビリティ：障害者にも配慮した実装

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました