内部リンクを現在のウィンドウで、外部リンクを新しいタブで開くように設定する[JavaScript]

Rank MathなどのSEOプラグインは、SEO（検索エンジン最適化）のためにすべての外部リンクを新しいタブ/新しいウィンドウで開くようにするオプションを提供します。

プラグインを使用せずにすべてのリンクを新しいウィンドウまたは現在のウィンドウで開くようにしたい場合、または内部リンクは現在のタブで、外部リンクは新しいタブで開くようにしたい場合はJavaScriptを使用できます。

内部リンクを現在のウィンドウで、外部リンクを新しいタブで開くように設定する[JavaScript]

WordPress ブロックエディタ（Gutenberg)でリンクを設定したい場合は、テキストを選択してリンクアイコンをクリックしてリンクを設定できますが、テキストを選択してから Ctrl + K ホットキーを押してリンクを設定すると便利です（Gutenberg ショートカット を参照）。

リンクを新しいタブで開くには新しいタブで開く「（あるいは」新しいタブで開く「）オプションをチェックしてください。

JavaScriptを使用して、すべてのリンクまたは内部リンク/外部リンクの動作を制御できます。

すべてのリンクを現在のタブで開くようにする

たとえば、内部リンクと外部リンクを問わず、すべてのリンクを現在のウィンドウで開くようにしたい場合は、次のJavaScriptを使用できます。

<script>
// 모든 링크를 현재 탭에서 열기
// Get all anchor tags on the page
var links = document.getElementsByTagName("a");

// Loop through each anchor tag
for(var i=0; i<links.length; i++) {

    // Set the target attribute to '_self' for each anchor tag
    // '_self' is the default behavior and will open links in the current tab
    links[i].target='_self';
}
</script>

上記のコードを使用すると、投稿中に特定のリンクを新しいタブで開くように設定しても無視され、現在のウィンドウで開きます。

すべてのリンクを新しいタブで開くようにする

すべてのリンク（内外のすべてのリンク）を新しいタブ/新しいウィンドウで開くように設定したい場合は、次のスクリプトを使用できます。

<script>
// 모든 링크를 새 탭에서 열기
// Get all anchor tags on the page
var links = document.getElementsByTagName("a");

// Loop through each anchor tag
for(var i=0; i<links.length; i++) {

    // Set the target attribute to '_blank' for each anchor tag
    // '_blank' will open links in a new browsing context (new tab or window)
    links[i].target='_blank';
}
</script>

同様に、上記のJasを使用すると、特定のリンクを現在のタブ/現在のウィンドウで開くように設定しても無視され、新しいタブで開かれます。

内部リンクは現在のタブで、外部リンクは新しいタブで開くように設定します

SEOのために、内部リンクは現在のタブで開き、外部リンクは新しいタブで開くようにすることをお勧めします。 次のJavaScriptを使用できます。

<script>
// 내부 링크는 현재 탭에서 열리도록 하고 외부 링크는 새 탭에서 열리도록 설정하기
// Get all the anchor tags on the page
var links = document.getElementsByTagName("a");

// Get the hostname of the current page
var thisHref = window.location.hostname;

// Loop through each anchor tag
for(var i=0; i<links.length; i++) {

    // Define the current link in the loop
    var link = links[i];

    // Use the getLocation function to create an anchor object for the href of the current link
    // This allows us to access the properties of the link such as hostname
    var a = getLocation(link.href);

    // If the hostname of the current link is the same as the hostname of the page
    if (a.hostname === thisHref) {

        // Remove the 'target' attribute from the link, which defaults it to open in the same tab
        link.removeAttribute("target");

    } else {

        // If the hostname of the link is different from the hostname of the page
        // Set the 'target' attribute of the link to '_blank' which will open it in a new tab
        link.target='_blank';
    }
}

// Function to create an anchor object from a given href
function getLocation(href) {

    // Create a new anchor tag
    var location = document.createElement("a");

    // Set the href of the created anchor tag
    location.href = href;

    // Return the anchor tag object, this can be used to access the properties of the href such as hostname
    return location;
};
</script>

内部リンクを現在のタブで開くように設定する

上記のスクリプトを分離して、内部リンクのみを現在のタブで開くようにしたい場合や、外部リンクのみを新しいタブで開くようにすることもできます。

内部リンクを現在のタブ/現在のウィンドウで開くようにしたい場合は、次のジャスコードを使用します。 このスクリプトを適用すると、外部リンクには影響しません。

<script>
// 내부 링크를 현재 탭에서 열기
// Get all the anchor tags on the page
var links = document.getElementsByTagName("a");

// Get the hostname of the current page
var thisHref = window.location.hostname;

// Loop through each anchor tag
for(var i=0; i<links.length; i++) {

    // Store the current link in a variable
    var link = links[i];

    // Use the getLocation function to create an object for the href of the current link
    // This allows us to access the properties of the link such as hostname
    var a = getLocation(link.href);

    // If the hostname of the current link is the same as the hostname of the page (i.e., the link is internal)
    if (a.hostname === thisHref){
    
        // Remove the 'target' attribute from the link
        // This ensures the link opens in the same tab
        link.removeAttribute("target");
    }
}

// Function to create an object from a given href
function getLocation(href) {

    // Create a new anchor tag
    var location = document.createElement("a");

    // Set the href of the created anchor tag
    location.href = href;

    // Return the anchor tag object, this can be used to access the properties of the href such as hostname
    return location;
};
</script>

外部リンクを新しいタブで開く

外部リンクのみを新しいタブで開くようにしたい場合は、次のスクリプトを利用できます。

<script>
// 외부 링크를 새 탭에서 열기
// Get all the anchor tags on the page
var links = document.getElementsByTagName("a");

// Get the hostname of the current page
var thisHref = window.location.hostname;

// Loop through each anchor tag
for(var i=0; i<links.length; i++) {

    // Define the current link in the loop
    var link = links[i];

    // Use the getLocation function to create an anchor object for the href of the current link
    // This allows us to access the properties of the link such as hostname
    var a = getLocation(link.href);

    // If the hostname of the current link is different from the hostname of the page
    if (a.hostname !== thisHref){

        // Set the 'target' attribute of the link to '_blank'
        // '_blank' opens the link in a new tab
        link.target='_blank';
    }
}

// Function to create an anchor object from a given href
function getLocation(href) {

    // Create a new anchor tag
    var location = document.createElement("a");

    // Set the href of the created anchor tag
    location.href = href;

    // Return the anchor tag object, this can be used to access the properties of the href such as hostname
    return location;
};
</script>

JavaScriptを読み込む

WordPressでJavaScriptを読み込む場合は、次の記事を参照して読み込むことができます。

• WordPressでjsスクリプトファイルとスタイルシートを正しくロードする方法

上記の方法が面倒な場合は、WPCodeなどのプラグインを使用してフッタ領域にJavaScriptコードを配置できます。

• WordPress ヘッダーとフッターに簡単にコードを挿入する：WPCode Insert Headers and Footersプラグイン

GeneratePress テーマまたはNeveテーマを使用している場合は、フック（HooK）を使用してフッタ領域にコードを追加できます。

• GeneratePress テーマフックを使用する
• WordPress Neveテーマフックを使用する（Neve Hooksプラグイン）

JSコードの適用方法の例

次の記事では、すべての内部リンクを現在のウィンドウ/タブに表示させることで、Google AdSense 収益を上げる方法について説明します。具体的にはJSファイルをロードする方法が説明されていますので、参考にしてください。

最後に、

以上では、JavaScriptを使用してリンクを新しいタブで開くかどうか、または現在のタブで開くかどうかを制御する方法について説明しました。 必要に応じて状況に合ったコードを適用できます。

本文で紹介されたコードはテストされていますが、十分にテストされていません。 必要に応じて機能しないコードがある場合は、下記のコメントでお知らせください。修正いたします。

この方法は WordPressそれだけでなく、ティーストーリー、HTMLウェブサイトなどでも活用できます。

参照

• Yoast SEOプラグイン：SEOデータ最適化を実行する
• WordPress こんにちは Elementor テーマ：サイドバーウィジェットを追加する
• WordPress GeneratePress テーマ：モバイルの使いやすさの問題