Rank MathなどのSEOプラグインは、SEO（検索エンジン最適化）のためにすべての外部リンクを新しいタブ/新しいウィンドウで開くようにするオプションを提供します。
![内部リンクを現在のウィンドウで、外部リンクを新しいタブで開くように設定する[JavaScript]](https://www.thewordcracker.com/wp-content/uploads/2021/04/Rank-Math-WP.jpg){kind=icon}
プラグインを使用せずにすべてのリンクを新しいウィンドウまたは現在のウィンドウで開くようにしたい場合、または内部リンクは現在のタブで、外部リンクは新しいタブで開くようにしたい場合は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を読み込む場合は、次の記事を参照して読み込むことができます。
上記の方法が面倒な場合は、WPCodeなどのプラグインを使用してフッタ領域にJavaScriptコードを配置できます。
GeneratePress テーマまたはNeveテーマを使用している場合は、フック（HooK）を使用してフッタ領域にコードを追加できます。
最後に、
以上では、JavaScriptを使用してリンクを新しいタブで開くかどうか、または現在のタブで開くかどうかを制御する方法について説明しました。 必要に応じて状況に合ったコードを適用できます。
本文で紹介されたコードはテストされていますが、十分にテストされていません。 必要に応じて機能しないコードがある場合は、下記のコメントでお知らせください。修正いたします。
この方法は WordPressそれだけでなく、ティーストーリー、HTMLウェブサイトなどでも活用できます。
コメントを残す