SEO를 위해서는 내부 링크와 외부 링크를 적절히 사용하는 것이 바람직합니다. 외부 링크를 새 창이나 새 탭에서 열도록 하고 싶은 경우가 있습니다. 수동으로 외부 링크를 새 창/새 탭에서 열리도록 설정할 수 있지만, Rank Math와 같은 플러그인을 사용하거나 간단한 코드를 사용하여 모든 외부 링크를 새 창이나 새 탭에서 하는 것도 가능합니다. 워드프레스 외부 링크를 강제로 새 창/새 탭으로 열도록 하는 방법과 내부 링크를 현재 창/탭에서 열리도록 하는 방법에 대하여 살펴보겠습니다.
SEO를 위해서는 외부 링크를 새 창에서 열리도록 하는 것이 바람직하지만, 구글 애드센스 수익이 중요하다면 모든 링크를 현재 창에서 열리도록 설정하는 것을 고려할 수 있습니다.
[ 이 글은 오래 전에 작성되었지만 최신 워드프레스 정보를 반영하여 전면적으로 수정되어 재발행되었습니다. ]
워드프레스 블록 에디터에서 새 탭에서 링크 열기 설정하기
워드프레스의 기본 에디터인 구텐베르크에서 글을 작성하는 경우 텍스트를 선택하고 Ctrl + K 단축키를 눌러 링크를 추가한 다음, 편집기에서 다시 링크를 클릭하고 편집 아이콘(연필 모양의 아이콘)을 클릭합니다.
고급을 클릭하면 새 탭에서 열기 옵션이 표시됩니다.
Rank Math 등 SEO 플러그인을 사용하는 경우에는 Open in New Tab (새 탭에서 열기)를 활성화하면 됩니다. 다음은 Rank Math 플러그인을 사용하는 경우 링크를 설정한 다음, 다시 링크를 선택하고 편집 아이콘을 눌러 고급을 선택했을 때의 화면입니다.
Yoast SEO 플러그인도 비슷하게 새 탭에서 열기 옵션과 nofollow, sponsored 속성을 선택할 수 있는 옵션이 표시됩니다.
SEO 플러그인을 사용하면 nofollow, sponsored와 같은 rel 속성을 선택할 수 있습니다. SEO 플러그인이 설치되지 않은 경우 과거에는 이러한 속성을 선택할 수 없었지만, 최신 워드프레스 버전에서는 nofollow 속성은 선택이 가능한 것 같습니다.
링크할 텍스트를 마우스로 선택한 다음 Add Link 아이콘을 클릭하거나 Ctrl + K 단축키를 눌러서 링크를 추가할 수 있습니다.
모든 외부 링크를 새 창/새 탭으로 열기
여러 가지 방법으로 모든 외부 링크를 새 창에서 강제로 열도록 할 수 있습니다. Rank Math와 같은 SEO 플러그인을 사용하는 경우에는 SEO 플러그인에 SEO를 위해 외부 링크를 새 창에서 열리도록 하는 옵션이 제공됩니다(아래의 "SEO 플러그인 사용하기" 섹션 참조).
플러그인을 사용하는 방법을 선호하지 않는 경우 다음과 같은 자바스크립트 코드로 테스트해 보시기 바랍니다.
<script>
document.addEventListener("DOMContentLoaded", function() {
var links = document.querySelectorAll("a");
var currentHost = window.location.host;
links.forEach(function(link) {
// href가 없으면 무시
if (!link.href) return;
// 현재 host가 포함되지 않은 경우 = 외부 링크
if (link.href.indexOf(currentHost) === -1) {
link.addEventListener("click", function(event) {
event.preventDefault();
event.stopPropagation();
window.open(link.href, "_blank");
});
}
});
});
</script>JS 코드를 워드프레스에 추가하는 다양한 방법이 있습니다.
- 차일드 테마를 만들고 enquque 방식으로 로드 → 사이트 속도에 대한 영향을 최소화함
- WPCode와 같은 플러그인 사용 → 간편함
- GeneratePress 테마 등 일부 테마에서는 JS 코드를 추가할 수 있는 기능 제공
WPCode(Insert Headers and Footers) 플러그인을 사용하여 코드를 푸터 영역에 추가하면 간편하게 추가할 수 있습니다.
하지만 WPCode를 사용하면 사이트 전체에서 로드되므로 그리 권장하지 않습니다. GeneratePress 테마를 사용하는 경우 훅(Hook)을 사용하여 푸터 영역에 JS 코드를 로드할 수 있습니다.
상기 코드가 작동하지 않는 경우 다음 글에서 소개하는 코드로도 테스트 해보세요.
참고로 모든 링크(내부 링크와 외부 링크 모두)를 새 창/새 탭에서 열리도록 하고 싶은 경우에는 다음과 같은 자스를 응용할 수 있습니다.
var links = document.getElementsByTagName("a");
for(var i=0; i<links.length; i++) {
links[i].target='_blank';
}SEO를 위해 내부 링크는 현재 창에서, 외부 링크는 새 창에서 열리도록 하는 것을 고려할 수 있습니다.
내부 링크는 현재 창에서 외부 링크는 새 창에서 열리도록 하기
SEO를 위해 내부 링크는 현재 창에서 열리도록 하고 외부 링크는 새 창에서 열리도록 할 수 있습니다.
아래의 JS 코드가 원하는 대로 작동하는지 테스트해보시기 바랍니다.
<script>
(function () {
"use strict";
// ===== 설정(필요 시 수정) =====
const INCLUDE_SUBDOMAINS = false; // 내부 도메인 판정 시 서브도메인을 포함할지 여부
const EXTERNAL_REL_TOKENS = ["noopener", "noreferrer"]; // 외부 링크 보안 토큰
const IGNORE_PROTOCOLS = new Set(["mailto:", "tel:", "javascript:"]); // 처리 제외 프로토콜
const DATA_OPTOUT_ATTR = "data-link-scope"; // data-link-scope="keep" 이면 처리 제외
// ===== 유틸 =====
const currentURL = window.location;
const currentHost = currentURL.hostname;
function isHashOnly(href) {
return href.charAt(0) === "#";
}
function toURL(href) {
// 상대경로를 포함한 모든 href를 절대 URL로 안전 변환
try {
return new URL(href, currentURL.href);
} catch (e) {
return null;
}
}
function isInternal(url) {
if (!url) return true; // 파싱 실패 시 보수적으로 내부로 간주
if (INCLUDE_SUBDOMAINS) {
return url.hostname === currentHost || url.hostname.endsWith("." + currentHost);
}
return url.hostname === currentHost;
}
function ensureRelTokens(el, tokens) {
const existing = (el.getAttribute("rel") || "").split(/\s+/).filter(Boolean);
const set = new Set(existing);
for (const t of tokens) set.add(t);
el.setAttribute("rel", Array.from(set).join(" "));
}
function removeRelTokens(el, tokens) {
const existing = (el.getAttribute("rel") || "").split(/\s+/).filter(Boolean);
const filtered = existing.filter(t => !tokens.includes(t));
if (filtered.length) el.setAttribute("rel", filtered.join(" "));
else el.removeAttribute("rel");
}
function shouldSkip(a) {
// 명시적 옵트아웃, 다운로드 링크, 버튼 역할, 해시만 있는 링크, 특수 프로토콜 등은 건너뜀
const href = a.getAttribute("href") || "";
if (!href) return true;
if (a.hasAttribute("download")) return true;
if (a.getAttribute(DATA_OPTOUT_ATTR) === "keep") return true;
if (isHashOnly(href)) return true;
for (const proto of IGNORE_PROTOCOLS) {
if (href.startsWith(proto)) return true;
}
return false;
}
function processLink(a) {
if (shouldSkip(a)) return;
const url = toURL(a.getAttribute("href"));
// http/https 이외는 스킵
if (!url || (url.protocol !== "http:" && url.protocol !== "https:")) return;
if (isInternal(url)) {
// 내부 링크: target 제거, 외부용 rel 토큰 제거
if (a.hasAttribute("target")) a.removeAttribute("target");
removeRelTokens(a, EXTERNAL_REL_TOKENS);
} else {
// 외부 링크: 새 창 + 보안 rel 토큰 추가
if (a.target !== "_blank") a.target = "_blank";
ensureRelTokens(a, EXTERNAL_REL_TOKENS);
}
}
function processAll(root) {
// a[href]만 선별하여 순회 (라이브 컬렉션 대신 정적 NodeList 사용으로 성능 개선)
const anchors = root.querySelectorAll("a[href]");
for (const a of anchors) processLink(a);
}
// 초기 DOM 처리
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", function () {
processAll(document);
});
} else {
processAll(document);
}
// 동적 추가 노드에 대한 처리 (예: 무한 스크롤, Ajax, 블록 에디터 등)
const mo = new MutationObserver(function (mutations) {
for (const m of mutations) {
for (const node of m.addedNodes) {
if (node.nodeType !== 1) continue; // ELEMENT_NODE
if (node.matches && node.matches("a[href]")) {
processLink(node);
}
// 하위에도 a[href]가 있을 수 있으므로 루트로 처리
processAll(node);
}
}
});
mo.observe(document.body, { childList: true, subtree: true });
})();
</script>만약 Rank Math 플러그인이 설치되어 있다면 Rank Math 내에서 모든 외부 링크가 새 창에서 열리도록 설정하고 다음 코드를 사용하여 내부 링크만 현재 창에서 열리도록 설정하는 것도 고려할 수 있을 것입니다.
<script>
(function () {
"use strict";
// ===== 설정(필요 시 수정) =====
const INCLUDE_SUBDOMAINS = false; // 내부 도메인 판정 시 서브도메인을 포함할지 여부
const EXTERNAL_REL_TOKENS = ["noopener", "noreferrer"]; // (내부 링크에선 제거 대상)
const IGNORE_PROTOCOLS = new Set(["mailto:", "tel:", "javascript:"]); // 처리 제외 프로토콜
const DATA_OPTOUT_ATTR = "data-link-scope"; // data-link-scope="keep" 이면 처리 제외
// ===== 유틸 =====
const currentURL = window.location;
const currentHost = currentURL.hostname;
function isHashOnly(href) {
return href.charAt(0) === "#";
}
function toURL(href) {
try {
// 상대경로 포함 모든 href를 절대 URL로 변환
return new URL(href, currentURL.href);
} catch (_e) {
return null;
}
}
function isInternal(url) {
if (!url) return true; // 파싱 실패 시 보수적으로 내부로 간주
if (INCLUDE_SUBDOMAINS) {
return url.hostname === currentHost || url.hostname.endsWith("." + currentHost);
}
return url.hostname === currentHost;
}
function removeRelTokens(el, tokens) {
const existing = (el.getAttribute("rel") || "").split(/\s+/).filter(Boolean);
const filtered = existing.filter(t => !tokens.includes(t));
if (filtered.length) el.setAttribute("rel", filtered.join(" "));
else el.removeAttribute("rel");
}
function shouldSkip(a) {
const href = a.getAttribute("href") || "";
if (!href) return true;
if (a.hasAttribute("download")) return true;
if (a.getAttribute(DATA_OPTOUT_ATTR) === "keep") return true;
if (isHashOnly(href)) return true;
for (const proto of IGNORE_PROTOCOLS) {
if (href.startsWith(proto)) return true;
}
return false;
}
function processLink(a) {
if (shouldSkip(a)) return;
const url = toURL(a.getAttribute("href"));
// http/https 이외는 스킵
if (!url || (url.protocol !== "http:" && url.protocol !== "https:")) return;
// ✅ 내부 링크만 현재 창 강제
if (isInternal(url)) {
if (a.hasAttribute("target")) a.removeAttribute("target");
// 내부 링크에 붙어 있을 수 있는 외부용 rel 토큰 정리
removeRelTokens(a, EXTERNAL_REL_TOKENS);
}
// ❌ 외부 링크는 전혀 건드리지 않음 (target/rel 그대로 유지)
}
function processAll(root) {
const anchors = root.querySelectorAll("a[href]");
for (const a of anchors) processLink(a);
}
// 초기 DOM 처리
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", function () {
processAll(document);
});
} else {
processAll(document);
}
// 동적 추가 노드 처리 (무한스크롤/블록 에디터 등)
const mo = new MutationObserver(function (mutations) {
for (const m of mutations) {
for (const node of m.addedNodes) {
if (node.nodeType !== 1) continue; // ELEMENT_NODE
if (node.matches && node.matches("a[href]")) {
processLink(node);
}
processAll(node);
}
}
});
mo.observe(document.body, { childList: true, subtree: true });
})();
</script>GeneratePress 테마가 설치된 워드프레스 사이트에서 테스트해보니 잘 작동하는 것을 확인했습니다. 다른 환경에서도 원하는 대로 작동할 것으로 생각되지만, 상기 코드가 작동하지 않는 경우 댓글을 통해 알려주시기 바랍니다.
모든 링크를 현재 창에서 열기
링크를 현재 창/탭에서 열리도록 하면 애드센스 광고 중 전면 광고가 표출될 가능성이 높기 때문에 수익 증대에 도움이 될 수 있습니다.
자세한 방법은 "워드프레스/티스토리: 모든 링크를 현재 탭/창에서 여는 방법 (애드센스 수익 증가)" 글의 내용을 참고해보세요.
다만, 이 방법을 이용하면 외부 링크도 브라우저의 현재 탭에서 열려서 이탈률(bounce rate)이 증가하여 SEO에는 불리할 수 있습니다.
참고로 티스토리에서는 앵커 광고가 금지되었고 2025년 9월 3일부터는 모바일 전면 광고도 설정할 수 없도록 정책이 바뀌었습니다.
플러그인을 사용하여 외부 링크를 새 창/새 탭에서 열기
플러그인을 사용하면 쉽게 외부 링크를 새 창에서 열도록 설정할 수 있습니다. Rank Math 플러그인을 사용한다면 랭크 매쓰 내에서 외부 링크를 새 창에서 열리도록 설정하는 것이 가능합니다.
SEO 플러그인 사용하기
워드프레스 SEO 플러그인에서 외부 링크를 새 창에서 열리도록 설정하는 옵션을 제공할 수 있습니다. 예를 들어, Rank Math에서는 워드프레스 관리자 페이지 » Rank Math SEO » 일반 설정(General Settings) » Links에서 Open External Links in New Tab/Window 옵션을 활성화하여 외부 링크를 새 창에서 열도록 할 수 있습니다.
이외에도 외부 링크나 이미지 파일 링크에 Nofollow 속성을 추가하는 등 다양한 SEO 관련 옵션을 제공합니다.
Rank Math 플러그인을 사용하는 경우 별도의 플러그인을 설치할 필요 없이 이 플러그인에서 제공하는 기능을 사용하여 외부 링크를 새 창에서 실행되도록 할 수 있습니다.
Yoast SEO 플러그인의 경우, 이 옵션이 제공되지 않는 것 같습니다. 제가 해당 옵션을 찾지 못했을 수도 있으므로, Yoast SEO에서도 이 기능이 제공되는 경우 아래 댓글을 통해 알려주시면 글을 업데이트하도록 하겠습니다.
External Links in New Window / New Tab 플러그인
이런 기능을 제공하는 대표적인 플러그인으로 External Links in New Window / New Tab이 있습니다.
이 플러그인은 2025년 9월 6일 현재 3만 개가 넘는 사이트에 설치되어 사용되고 있습니다. Rank Math 플러그인이 설치되어 있는 경우에는 이 플러그인을 사용할 필요가 없고 Rank Math 내에서 설정하시기 바랍니다.
이 플러그인은 기본적으로 모든 외부 링크를 새 창/탭에서 열리도록 합니다. 또한, 새 탭에서 열리지 않도록 예외 링크를 추가할 수 있습니다.
마치며
이상으로 워드프레스에서 외부 링크를 새 창/새 탭에서 표시하는 방법을 살펴보았습니다. 글을 적성할 때 내부 링크(Internal Link)와 외부 링크(Exernal Link)를 적절히 추가하면 SEO에 도움이 됩니다. Yoast SEO나 Rank Math와 같은 SEO 플러그인을 사용하면 글 작성 시 SEO와 관련하여 도움을 받을 수 있습니다.
링크를 열때 현재창에서 열지 새창에서 열지 항상 고민이었는데 좋은 정보 항상 감사드립니다.
일반적으로 내부 링크는 현재 창에서, 외부 링크는 새 창/새 탭에서 열리도록 하면 무난할 것 같습니다. 애드센스 수익이 중요하다면 모든 링크를 현재 탭에서 열리도록 하면 전면 광고 표출의 기회가 늘어나서 수익 증대에 도움이 될 수 있지만, 이탈률이 증가하여 SEO에는 불리할 수 있습니다.😄