다국어 블로그 운영 가이드: HTML lang 설정, hreflang 태그, 스킨 영문화 등 해외 유입과 검색 노출을 최적화하는 실전 전략을 정리합니다.
지난 1, 2편을 통해 다국어 블로그의 핵심 전략과 URL 구조에 대해 알아보았습니다. 하지만 완벽한 구조를 갖췄더라도, 검색 엔진과 소통하는 ‘기술적 언어’가 누락되면 공들여 쓴 영문 포스팅은 미아가 될 수 있습니다.
오늘은 다국어 블로그 운영의 실전 기술 설정 6단계를 정리합니다.
전 세계 사용자를 대상으로 하는 다국어 블로그는 단순히 글을 번역해 올리는 것만으로는 충분하지 않습니다. 구글과 같은 검색 엔진이 페이지의 작성 언어와 대상 독자를 정확히 이해할 수 있도록, 기술적 장치를 마련하는 것이 필요합니다.
다국어 블로그를 운영할 때 가장 이상적인 방법은 한국 콘텐츠와 외국어 콘텐츠를 각각 별도의 블로그나 사이트에서 운영하는 것입니다.
하지만 이렇게 하면 트래픽과 콘텐츠 가치가 분산될 수 있고, 여러 블로그를 동시에 관리하는 것은 생각만큼 쉽지 않습니다.
그래서 오늘은 하나의 블로그나 사이트에서 다국어 콘텐츠를 함께 운영하는 방법에 대해 다뤄보겠습니다.
1. HTML 언어 설정 (The lang Attribute)
모든 웹 페이지의 기초는 HTML 태그에서 시작됩니다. 검색 엔진과 브라우저에 이 페이지의 기본 언어를 선언하는 가장 첫 번째 단계입니다.
- 설정 방법: HTML 문서 최상단의 html 태그에 lang 속성을 추가합니다.
- 예시: 영어 페이지일 경우 html lang=”en”, 한국어 페이지일 경우 html lang=”ko”로 설정합니다.
- 효과: 브라우저가 텍스트를 렌더링할 때 적절한 폰트를 선택하도록 하고, 음성 읽기 도구(Screen Readers)가 올바른 발음으로 콘텐츠를 읽을 수 있게 합니다. 접근성이 좋다는 것은 검색 노출에서도 가산점으로 작용합니다.
하나의 블로그에서 여러 언어를 운영할 경우, HTML에 하드코딩된 언어 속성을 각 콘텐츠에 맞게 동적으로 변경해야 합니다.
2. hreflang 설정을 통한 중복 콘텐츠 방지
또한 매번 여러 언어의 콘텐츠를 새로 제작하는 것은 상당히 고단한 작업이 될 수 있습니다.
이번 목표는 한국어 버전의 콘텐츠를 단순히 영어화하여 해외 유입을 유도하는 것이므로, 기존 콘텐츠를 번역하는 방식으로 진행하게 됩니다.
하지만 동일한 내용의 다른 언어 버전은 검색 엔진에서 중복 콘텐츠로 판단될 수 있기 때문에, 아래와 같은 설정이 필수적입니다.
다국어 블로그에서 가장 중요한 기술적 SEO 요소는 hreflang 태그입니다.
이 태그는 동일한 내용의 콘텐츠가 여러 언어로 존재할 때, 검색 엔진에 각 버전 간의 관계를 정확히 설명해 줍니다
- 핵심 역할: 특정 지역이나 언어를 사용하는 사용자에게 가장 적합한 버전의 URL을 검색 결과에 노출시킵니다.
- 코드 예시:
link rel="alternate" hreflang="ko" href="https://example.com/ko/post" /
link rel="alternate" hreflang="en" href="https://example.com/en/post" /
link rel="alternate" hreflang="x-default" href="https://example.com/" / - 주의사항: 자기 자신을 가리키는 태그를 포함해야 하며, 상호 참조(A페이지에서 B를 가리키면, B에서도 A를 가리킴)가 반드시 이루어져야 오류가 발생하지 않습니다.
3. 테마 및 스킨의 완벽한 영문화 (Localization)
아무리 본문 내용이 다국어로 작성되어 있어도, 블로그 전체 스킨이 한국어 기반이라면 검색 엔진은 단순히 한국 블로그의 외국어 버전으로 판단할 수 있습니다.
따라서 본문이 영어라고 해서 다국어 블로그가 완성되는 것은 아닙니다.
검색엔진이 마주하는 시스템 UI 요소들도 모두 영어로 제공되어야 해외 사용자및 검색엔진에게 신뢰도가 높아지고, 검색 엔진 최적화 측면에서도 긍정적인 영향을 줍니다.
- 번역 대상: ‘Read More’, ‘Search’, ‘Categories’, ‘Comment’ 등 버튼과 위젯의 텍스트.
- 최적화 팁: 티스토리나 워드프레스 스킨 편집에서 해당 문구들을 직접 영어로 수정하거나, 언어별로 다른 스킨 템플릿이 적용되도록 설정해야 합니다.
블로그에 동적으로 한글이 추가될 가능성을 고려하여, 전체 스킨의 50% 이상을 영어로 변환하는 작업을 진행하세요.
또한 이 링크를 통해블로그 전체에서 외국어와 한글의 비중을 확인해보실 수 있습니다.
4. 콘텐츠 상하단 섹션별 언어 명시 (lang=”en”)
이미 HTML 상단에 언어를 표시했더라도, 동적으로 적용되는 경우 검색 엔진이 이를 놓칠 수 있습니다.
따라서 페이지 전체의 언어 설정 외에도, 특정 섹션이 다른 언어로 작성된 경우에는 해당 태그(div, section, p 등)에 직접 lang 속성을 부여하는 것이 좋습니다.
- 활용 사례: 한국어 포스팅 내에 영어 원문을 인용하거나, 상단 헤더와 하단 푸터에 글로벌 공통 공지사항을 영어로 적을 때 유용합니다.
- 효과: 구글 봇이 페이지 내의 부분적인 언어 변화를 감지하여 텍스트 분석의 정확도를 높입니다.
5. 방문 시 번역기 팝업 생성 여부 확인
작업이 완료 됬다면 사용자가 자신의 기본 언어와 다른 페이지에 접속했을 때, 크롬 브라우저 등에서 “이 페이지를 번역하시겠습니까?”라는 팝업이 뜨는지 확인해야 합니다.
- 체크 포인트: 만약 영어 페이지임에도 불구하고 번역 팝업이 뜨지 않는다면, HTML lang 설정이 잘못되었거나 메타 태그에서 번역 거부(notranslate) 설정이 되어 있는지 확인해야 합니다.
- 전략: 자연스러운 영문 콘텐츠로 인식된다면 구글은 이를 해당 언어권의 유익한 정보로 판단하여 검색 순위에 긍정적인 영향을 줍니다.
6. 구글 서치 콘솔(GSC) 색인 및 국가 타겟팅 확인
마지막으로 공들여 만든 다국어 페이지가 구글 색인에 정상적으로 반영되었는지 확인해야 합니다.
- 색인 확인: 구글 서치 콘솔의 ‘URL 검사’ 도구를 통해 영문 페이지가 정상적으로 수집되었는지 확인합니다.
- Sitemap 제출: 다국어 구조가 포함된 sitemap.xml을 제출하여 구글 봇이 언어별 경로를 쉽게 탐색하도록 합니다.
- 국가별 타겟팅: 과거에는 서치 콘솔에서 직접 국가 타겟팅이 가능했으나, 현재는 hreflang 태그를 통해 구글이 자동으로 판단합니다. 따라서 앞선 2번 과정이 완벽해야 색인 후 올바른 국가에 노출됩니다.
7. 적용 코드 예제및 적용 방법
1. 콘텐츠 제작사 다국어 표시하기
외국어 블로그 콘텐츠를 제작한 후, 하단에 아래와 같은 코드를 적용합니다.
이 코드는 각각의 언어별 콘텐츠 경로를 설정하는 용도입니다.
예시:
p id="en"https://samp.com/124/p
p id="ko"https://samp.com/213/p
2. 해외 버전 블로그만 HTML 헤드 태그 변경하기
한국어 버전과 외국어 버전을 구분하여, 위에서 지정한 코드를 참고해 각 페이지에 언어별 SEO 설정을 자동으로 적용할 수 있습니다.
아래 코드는 HTML 하단에 적용하시면 됩니다.
script id="hreflang-stealth"
(function () {
const runHreflang = () = {
const koEl = document.getElementById("ko");
const enEl = document.getElementById("en");
// 기본 언어 설정
document.documentElement.setAttribute(‘lang’, ‘ko’);
document.documentElement.lang = ‘ko’;
// 기존 hreflang 제거
document.querySelectorAll(‘link[rel=”alternate”][hreflang]’).forEach(el = el.remove());
// 각 언어별 링크 생성
if (koEl) {
const lko = document.createElement(“link”);
lko.rel = “alternate”;
lko.hreflang = “ko”;
lko.href = koEl.textContent.trim();
document.head.appendChild(lko);
}
if (enEl) {
const len = document.createElement(“link”);
len.rel = “alternate”;
len.hreflang = “en”;
len.href = enEl.textContent.trim();
document.head.appendChild(len);
}
// x-default 설정
const defaultUrl = enEl?.textContent.trim() || koEl?.textContent.trim();
if (defaultUrl) {
const ldef = document.createElement(“link”);
ldef.rel = “alternate”;
ldef.hreflang = “x-default”;
ldef.href = defaultUrl;
document.head.appendChild(ldef);
}
};
if (document.readyState !== ‘loading’) runHreflang();
else document.addEventListener(“DOMContentLoaded”, runHreflang);
})();
/script
위에서 소개한 방법만 적용해도 해외 유입과 검색 노출 측면에서 유리한 위치를 점할 수 있을 것으로 기대됩니다.
이 글이 유용하셨다면, 참신한 댓글과 구독 부탁드립니다.