SEO HTML, 검색 엔진 최적화를 위한 태그 10가지
목차
- 한 눈에 SEO HTML 태그 확인하기
- 검색 결과 제목을 만드는 타이틀 태그
- SEO 관점에서 타이틀 태그 작성 포인트
- 타이틀 태그 작성 체크리스트
- 클릭률을 결정하는 메타 디스크립션
- 메타 디스크립션을 잘 써야 하는 이유
- 중복 URL을 정리하는 캐노니컬 태그
- 언제 캐노니컬 태그가 필요할까?
- 콘텐츠 구조를 표현하는 헤딩 태그
- 헤딩 태그와 SEO HTML의 관계
- 헤딩 태그 작성 체크리스트
- 링크의 의미를 전달하는 앵커 태그
- 앵커 텍스트가 SEO HTML에 미치는 영향
- 앵커 태그 작성 체크리스트
- 페이지 구조를 명시하는 시맨틱 태그
- 시맨틱 태그가 검색 엔진에 미치는 영향
- 이미지를 검색 엔진에 설명하는 HTML 태그
- 이미지 SEO를 결정하는 HTML 속성들
- picture, figure 태그도 함께 알아두면 좋은 이유
- 이미지 태그 작성 체크리스트
- 모바일 색인의 기본 조건, 뷰포트 태그
- 뷰포트 태그가 없으면 어떻게 되나
- 뷰포트 태그는 그냥 이대로 사용하세요
- 색인 범위를 제어하는 robots 메타 태그
- robots 태그 실무 활용 예시
- robots 메타 태그 vs robots.txt, 무엇이 다른가
- SEO에 영향을 미치는 iframe 사용법
- iframe 사용 시 SEO 주의사항
- SEO HTML 태그를 고려해서 직접하기 어렵다면?
SEO를 하다보면 HTML을 손봐야 하는 상황이 자주 생깁니다. 그러다 보니 개발자가 아니더라도 직접 공부해보시는 분들이 많죠.
문제는 HTML 태그가 워낙 많다 보니 SEO와 무관한 내용까지 공부하게 될 수 있습니다. 물론 다 알면 도움되지만, SEO 중심 태그를 우선적으로 공부하면 훨씬 효율적이잖아요.
이 글에서는 SEO에 관련이 깊은 HTML 태그 10가지를 추렸습니다. 각 태그의 기능·역할 그리고 작성법을 하나씩 살펴보겠습니다.
한 눈에 SEO HTML 태그 확인하기
바로 본문으로 들어가기 전에 소개해드릴 HTML 태그 10가지를 표로 먼저 확인해보도록 하겠습니다.
| 태그 | 역할 요약 |
|---|---|
<title> | 검색결과에 표시되는 페이지 제목 |
<meta name="description"> | 검색결과 제목 아래 노출되는 설명 텍스트 |
<link rel="canonical"> | 중복 URL 중 대표 페이지를 지정 |
<h1> ~ <h6> | 콘텐츠 구조와 주제 계층을 구분하는 제목 태그 |
<a href=""> | 내부 및 외부 링크를 연결하는 앵커 태그 |
시맨틱 태그 (<header>, <main> 등) | 페이지 구조와 콘텐츠 역할을 검색엔진에 명시 |
<img alt=""> | 이미지 내용을 텍스트로 설명하는 대체 속성 |
<meta name="viewport"> | 모바일 환경에서 화면 표시 방식을 제어 |
<meta name="robots"> | 크롤링 및 색인 여부를 검색엔진에 지시 |
<iframe> | 외부 콘텐츠 삽입 시 SEO에 미치는 영향 |
검색 결과 제목을 만드는 타이틀 태그
<title> 태그는 검색 결과 페이지에 표시되는 페이지 제목을 정의하는 태그입니다. 구글 검색 결과에서 파란색 링크 텍스트로 보이는 바로 그 문구가 여기서 나오죠.
<head>
<title>SEO HTML, 검색 엔진 최적화를 위한 태그 10가지 | 마켓어댑터</title>
</head><head> 태그 안에 위치해야 하고, 페이지당 하나만 사용하는 것이 원칙입니다. 여러 개를 작성하면 브라우저가 첫 번째 것만 인식하거든요.
SEO 관점에서 타이틀 태그 작성 포인트
검색 엔진은 타이틀 태그를 페이지 주제를 파악하는 1차 신호로 활용합니다. 타겟 키워드를 앞쪽에 배치하는 것이 중요한 이유가 여기에 있는데요.
적정 길이는 50~60자 내외입니다. 너무 길면 검색 결과에서 잘려서 보이고, 너무 짧으면 클릭을 유도할 문구를 담기 어렵습니다. 병원이나 법률 사무소처럼 지역 기반 업종이라면 “강남 치과 임플란트 비용”처럼 지역명을 자연스럽게 포함하는 것도 좋은 방법입니다.
한 가지 주의할 점은, 구글의 타이틀 태그 표시 기준에 맞지 않는다고 판단되면 직접 제목을 바꿔서 보여주는 경향이 있다는 건데요. 이를 막으려면 타이틀과 페이지 본문의 주제가 일치해야 합니다.
타이틀 태그 작성 체크리스트
- 타겟 키워드를 제목 앞쪽에 배치했는가
- 길이가 50~60자 내외인가
- 지역 기반 업종이라면 지역명이 포함돼 있는가
- 페이지 본문 내용과 주제가 일치하는가
- 페이지당
<title>태그가 1개만 있는가
클릭률을 결정하는 메타 디스크립션
<meta name="description"> 태그는 검색 결과에서 타이틀 아래에 표시되는 설명 문구를 정의합니다. 직접적인 순위 요소는 아니지만, 클릭률(CTR)에 상당한 영향을 미칠 수 있습니다.
<head>
<meta name="description" content="세무사 홈페이지 제작 시 꼭 확인해야 할 비용 항목과 업체 선택 기준을 정리했습니다. 제작 전 필독 가이드.">
</head>위 코드에서 content="..." 큰따옴표 안의 텍스트가 실제로 검색 결과에 표시되는 설명 문구입니다. 이 부분만 원하는 내용으로 교체하면 됩니다. <head> 안에 위치해야 하고, 페이지당 하나만 작성합니다.
메타 디스크립션을 잘 써야 하는 이유
순위는 같아도 클릭률은 메타 디스크립션에 따라 크게 달라집니다. 같은 3위라도 설명이 구체적이고 검색자의 의도에 맞아떨어지면 1위보다 더 많은 클릭을 받는 경우도 있습니다.
적정 길이는 모바일 기준 120자, PC 기준 150~160자 내외입니다. 검색자가 찾는 정보를 얻을 수 있다는 확신을 줄수록 클릭으로 이어질 가능성이 높아집니다. “무료 상담 가능”, “즉시 확인 가능” 같이 행동을 유도하는 문구를 자연스럽게 포함하는 것도 실무에서 자주 쓰이는 방식입니다.
타이틀과 마찬가지로, 구글이 메타 디스크립션도 자체적으로 바꿔서 보여줄 수 있습니다. 작성하지 않으면 구글이 본문 중 임의 구간을 잘라서 노출하기 때문에, 직접 작성해두는 편이 훨씬 유리하겠죠?
중복 URL을 정리하는 캐노니컬 태그
<link rel="canonical"> 태그는 내용이 같거나 비슷한 여러 URL 중 대표 페이지를 검색 엔진에 알려주는 역할을 합니다.
<head>
<link rel="canonical" href="https://example.com/seo-guide/">
</head>href 속성에 대표로 인정받을 URL을 넣으면 됩니다. 해당 URL은 반드시 접속 가능한 실제 주소여야 하고, 프로토콜(https://)까지 포함한 완전한 형태로 작성합니다.
언제 캐노니컬 태그가 필요할까?
가장 흔한 상황은 같은 내용의 페이지가 주소만 다르게 여러 개 생기는 경우입니다. 예를 들어 블로그 글 하나가 ‘공지사항’ 카테고리와 ‘SEO 팁’ 카테고리에 동시에 등록되면, 내용은 똑같아도 URL은 두 개가 됩니다. 검색 엔진은 이를 별개의 페이지로 볼 수 있고, 어느 쪽을 검색 결과에 올릴지 스스로 판단하게 됩니다.
원하지 않는 URL이 검색 결과에 뜨거나, 동일한 내용이 분산되면서 둘 다 순위가 낮아지는 문제가 생길 수 있습니다. 캐노니컬 태그로 “이 주소가 대표 페이지입니다”라고 명시해두면 검색 엔진이 그 페이지를 기준으로 평가합니다.
워드프레스 기준으로는 Yoast SEO나 Rank Math 같은 플러그인을 설치하면 캐노니컬 태그가 자동으로 설정됩니다. 직접 건드릴 일은 많지 않지만, 글을 복수의 카테고리에 올리는 구조라면 한 번쯤 확인해두는 것이 좋습니다.
콘텐츠 구조를 표현하는 헤딩 태그
<h1>부터 <h6>까지의 헤딩 태그는 페이지 내 콘텐츠의 제목과 계층 구조를 나타냅니다. 검색 엔진은 이 구조를 통해 페이지의 핵심 주제와 세부 내용을 파악합니다.
<h1>세무사 홈페이지 SEO 최적화 가이드</h1>
<h2>왜 세무사 홈페이지에 SEO가 필요한가</h2>
<h3>검색으로 들어오는 신규 의뢰인의 비중</h3>
<h2>세무사 홈페이지 SEO 실전 체크리스트</h2>페이지 내 <h1>은 한 개만 사용하는 것이 원칙입니다. <h1>은 페이지의 핵심 주제를 대표하는 가장 중요한 제목이기 때문입니다. <h2>, <h3>은 여러 개 사용할 수 있고, 상위 헤딩을 건너뛰고 쓰는 상황(예: <h2> 다음 바로 <h4>)은 피해야 합니다.
헤딩 태그와 SEO HTML의 관계
검색 엔진은 헤딩 태그에 포함된 키워드에 비교적 높은 가중치를 부여하는 것으로 알려져 있습니다. 타겟 키워드와 관련 키워드를 헤딩에 자연스럽게 녹이면 검색 엔진이 페이지 주제를 더 정확하게 인식할 수 있습니다.
또 하나 중요한 점은 AI 검색 엔진의 인용 방식과도 연결된다는 것입니다. ChatGPT나 Perplexity 같은 AI 검색 엔진은 헤딩 구조를 보고 어떤 섹션이 어떤 내용을 다루는지 파악합니다. 헤딩 없이 길게 이어지는 본문보다 구조가 명확한 페이지가 인용되기 훨씬 쉽습니다.
독자 입장에서도 헤딩이 잘 정리된 글은 원하는 정보를 빠르게 찾을 수 있어서 이탈률이 낮아집니다. SEO와 사용자 경험 두 측면 모두에 직접 영향을 미치는 태그인 셈이죠.
헤딩 태그 작성 체크리스트
<h1>이 페이지 내 1개만 사용됐는가- 헤딩 단계를 건너뛰지 않았는가 (예:
<h2>다음 바로<h4>금지) - 타겟 키워드와 관련 키워드가 헤딩에 자연스럽게 포함돼 있는가
- 각 헤딩이 해당 섹션 내용을 정확히 대표하는가
링크의 의미를 전달하는 앵커 태그
<a href=""> 태그는 다른 페이지나 특정 URL로 이동하는 링크를 만드는 태그입니다. 단순히 이동 기능만 하는 것이 아니라, 링크 텍스트(앵커 텍스트)를 통해 연결된 페이지의 주제를 검색 엔진에 전달하는 역할도 하죠.
<!-- 내부 링크 -->
<a href="/seo-guide/">SEO 최적화 가이드 보기</a>
<!-- 외부 링크 (새 탭 열기) -->
<a href="https://search.google.com/search-console" target="_blank" rel="noopener noreferrer">구글 서치콘솔</a>
<!-- 외부 링크 (검색 엔진 권한 전달 차단) -->
<a href="https://partner-site.com/" rel="nofollow">협력 파트너사</a>href 속성에 이동할 URL을 넣고, 태그 사이에 링크 텍스트를 작성합니다. 외부 링크에 target="_blank"를 쓰면 새 탭에서 열리고, rel="noopener noreferrer"는 보안 취약점을 막아줍니다.
앵커 텍스트가 SEO HTML에 미치는 영향
앵커 텍스트는 “여기를 클릭하세요”, “자세히 보기”처럼 모호하게 쓰면 SEO 효과가 거의 없습니다. 반면 “세무사 홈페이지 SEO 가이드”처럼 연결 페이지의 주제를 담은 텍스트를 쓰면 검색 엔진이 두 페이지의 관계와 주제를 함께 파악하게 됩니다.
내부 링크 구조도 중요합니다. 서비스 소개 페이지, 블로그 글, FAQ 페이지를 서로 유기적으로 연결하면 검색 엔진 크롤러가 사이트 전체를 더 효율적으로 탐색할 수 있습니다. 특히 새로 발행한 글은 기존 글에서 링크를 걸어줘야 크롤러가 빠르게 발견하고 색인할 수 있습니다.
rel="nofollow" 속성은 해당 링크로 검색 엔진의 평가 권한(링크 주스)을 전달하지 않겠다는 신호입니다. 광고, 협찬, 신뢰할 수 없는 외부 사이트로의 링크에는 이 속성을 붙이는 것이 권장됩니다.
앵커 태그 작성 체크리스트
- 앵커 텍스트가 “여기를 클릭”, “자세히 보기” 같은 모호한 표현 없이 연결 페이지의 주제를 담고 있는가?
- 새로 발행한 글에 기존 글에서 내부 링크를 걸어뒀는가?
- 외부 링크에
target="_blank"와rel="noopener noreferrer"가 함께 작성돼 있는가? - 광고·협찬 링크에
rel="nofollow"가 적용돼 있는가?
페이지 구조를 명시하는 시맨틱 태그
시맨틱 태그란 콘텐츠의 의미와 역할을 이름 자체로 설명하는 HTML 태그를 말합니다. <div> 같은 범용 태그와 달리, 검색 엔진이 각 영역의 기능을 바로 파악할 수 있습니다.
SEO에서 자주 쓰이는 시맨틱 태그는 다음과 같습니다.
| 태그 | 역할 |
|---|---|
<header> | 사이트 상단 영역 (로고, 네비게이션 포함) |
<nav> | 사이트 내 메뉴 및 탐색 링크 |
<main> | 페이지의 핵심 콘텐츠 영역 |
<article> | 독립적으로 의미가 있는 콘텐츠 (블로그 글, 뉴스 기사 등) |
<section> | 주제별로 구분되는 콘텐츠 묶음 |
<aside> | 본문과 관련된 부가 콘텐츠 (사이드바, 관련 글 등) |
<footer> | 사이트 하단 영역 (연락처, 저작권 정보 등) |
<body>
<header>
<nav>...</nav>
</header>
<main>
<article>
<h1>세무사 홈페이지 SEO 가이드</h1>
<section>...</section>
</article>
</main>
<aside>관련 글 목록</aside>
<footer>...</footer>
</body>시맨틱 태그가 검색 엔진에 미치는 영향
구글은 시맨틱 태그를 통해 페이지의 어느 부분이 핵심 콘텐츠인지, 어느 부분이 내비게이션인지를 구분해요. <main> 안에 담긴 콘텐츠는 핵심 내용으로, <nav>나 <footer> 안에 있는 텍스트는 보조 정보로 처리될 가능성이 높습니다.
<article> 태그는 특히 블로그나 뉴스 형태의 페이지에서 중요한데요. 구글 뉴스나 검색 결과의 리치 스니펫에 노출되기 위한 조건 중 하나가 콘텐츠 구조의 명확성이고, <article> 태그가 이를 충족하는 데 기여합니다.
접근성 측면의 이점도 있습니다. 시맨틱 구조가 잘 갖춰진 페이지는 스크린 리더 같은 보조 기술에서도 제대로 인식되며, 구글은 접근성이 좋은 사이트를 긍정적으로 평가하는 경향이 있습니다.
이미지를 검색 엔진에 설명하는 HTML 태그
검색 엔진은 이미지 자체를 완전하게 읽지 못합니다. <img> 태그의 alt 속성이 바로 그 공백을 채워주는 역할을 합니다. 이미지의 내용을 텍스트로 설명해서 검색 엔진이 이미지를 이해할 수 있도록 돕는 것입니다.
구글이 엄청난 대기업이여서 이미지도 AI로 해석한다는 잘못된 얘기가 있는데요. 전세계적으로 수많은 사이트를 수집해야하는 구글 입장에서 이미지 해석으로 비효율적인 리소스 낭비를 하지 않습니다.
<!-- 🟢 alt 텍스트 작성 예시 -->
<img src="dental-implant-procedure.jpg" alt="치과 임플란트 시술 단계별 과정 사진">
<!-- ❌ 장식용 이미지는 alt를 비워둠 -->
<img src="divider-line.png" alt="">
<!-- 🟢 width, height 명시로 레이아웃 안정성 확보 -->
<img src="main-banner.jpg" alt="강남 세무사 사무소 무료 상담 안내" width="1200" height="600">alt 속성이 없으면 크롤러가 이미지를 건너뛰고, 이미지 검색 결과에도 노출되지 않습니다. 단순 장식용 이미지는 alt=""로 비워두는 것이 맞고, 의미 있는 이미지에는 반드시 설명을 넣어야 합니다.
이미지 SEO를 결정하는 HTML 속성들
alt 텍스트 외에도 파일명과 title 속성도 활용할 수 있습니다. implant-procedure.jpg처럼 의미 있는 파일명을 쓰는 것과, alt에 핵심 키워드를 자연스럽게 포함하는 것이 이미지 검색 노출에 도움이 됩니다.
width와 height 속성을 명시해두면 페이지 로딩 시 이미지 자리가 미리 확보됩니다. 이 덕분에 콘텐츠가 갑자기 밀리는 현상(레이아웃 시프트)이 줄어들고, 구글의 Core Web Vitals 지표 중 CLS(누적 레이아웃 이동) 점수가 개선됩니다. CLS는 페이지 경험 평가에 포함되는 항목이라 SEO에도 직접 연결됩니다.
이미지 파일 용량도 빠뜨릴 수 없습니다. 태그 설정이 아무리 잘 돼 있어도 이미지 파일 자체가 너무 크면 로딩 속도가 느려지고, 이는 검색 순위에 부정적인 영향을 줍는데요. WebP 형식으로 변환하거나 이미지 압축 도구를 활용해 용량을 줄이는 것이 권장됩니다.
picture, figure 태그도 함께 알아두면 좋은 이유
<picture> 태그는 화면 크기나 기기에 따라 다른 이미지를 보여줄 수 있도록 하는 태그입니다. 모바일에는 작은 이미지, PC에는 큰 이미지를 각각 지정할 수 있어서 불필요한 데이터 로딩을 줄일 수 있습니다. 페이지 속도 개선에 직접 기여하는 만큼 SEO와도 연결될 수 있죠.
<picture>
<source srcset="banner-mobile.webp" media="(max-width: 768px)">
<img src="banner-desktop.webp" alt="세무사 사무소 무료 상담 안내">
</picture><figure>와 <figcaption>은 이미지에 설명 캡션을 붙일 때 사용합니다. 검색 엔진은 <figcaption> 텍스트를 이미지 관련 맥락으로 인식하기 때문에, alt 텍스트와 함께 쓰면 이미지 검색 노출에 도움이 됩니다.
<figure>
<img src="seo-structure.jpg" alt="SEO 최적화 페이지 구조 다이어그램">
<figcaption>검색 엔진이 선호하는 페이지 구조 예시</figcaption>
</figure>이미지 태그 작성 체크리스트
- 의미 있는 이미지에
alt텍스트가 작성돼 있는가 - 장식용 이미지는
alt=""로 비워뒀는가 - 파일명이
image001.jpg대신 내용을 설명하는 이름으로 저장돼 있는가 width와height속성이 명시돼 있는가- 이미지 용량을 줄였는가 (WebP 변환 또는 압축 도구 활용)
모바일 색인의 기본 조건, 뷰포트 태그
<meta name="viewport"> 태그는 모바일 기기에서 페이지가 어떻게 표시될지를 제어하는 태그입니다. 구글이 모바일 우선 색인(Mobile-First Indexing)을 적용한 이후, 이 태그의 설정 여부가 검색 순위에도 영향을 미칩니다.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>width=device-width는 페이지 너비를 기기 화면 너비에 맞추라는 의미이고, initial-scale=1.0은 페이지를 처음 열 때 확대/축소 없이 100% 비율로 표시하라는 뜻인데요. 이 2가지를 함께 쓰는 것이 표준 설정입니다.
뷰포트 태그가 없으면 어떻게 되나
뷰포트 태그가 없으면 모바일 브라우저는 페이지를 PC 화면 크기(보통 960px 기준)로 렌더링한 뒤 축소해서 보여줍니다. 텍스트가 너무 작아져서 읽기 어렵고, 버튼을 정확히 누르기도 힘들어지죠.
구글 서치콘솔의 모바일 사용성 보고서에서 “뷰포트가 설정되지 않음” 경고가 뜨면 즉시 수정해야 합니다. 이 상태가 지속되면 모바일 검색 순위에 직접적인 불이익이 발생할 수 있습니다.
워드프레스를 사용하는 경우, 반응형 테마를 쓴다면 대부분 자동으로 포함돼 있습니다. 직접 확인하려면 페이지 소스에서 viewport를 검색해보면 됩니다.
뷰포트 태그는 그냥 이대로 사용하세요
별도로 커스텀할 필요 없이 아래 한 줄을 <head> 안에 붙여넣으면 됩니다. 대부분의 사이트에서 이 설정이 표준으로 통용됩니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">직접 HTML을 수정하기 어려운 환경이라면 서치콘솔 → 모바일 사용성 보고서에서 “뷰포트가 설정되지 않음” 오류가 없는지 먼저 확인하는 것으로 충분합니다.
색인 범위를 제어하는 robots 메타 태그
<meta name="robots"> 태그는 검색 엔진 크롤러에게 해당 페이지를 색인할지, 링크를 따라갈지를 지시하는 태그입니다.
<!-- 색인 허용, 링크 따라가기 허용 (기본값) -->
<meta name="robots" content="index, follow">
<!-- 색인 금지 -->
<meta name="robots" content="noindex, follow">
<!-- 구글봇에만 별도 지시 -->
<meta name="googlebot" content="noindex, nofollow">content 속성에 쉼표로 구분해 여러 지시어를 함께 쓸 수 있는데요. 주로 쓰이는 값은 아래와 같습니다.
| 값 | 의미 |
|---|---|
index | 페이지를 검색 결과에 노출 (기본값) |
noindex | 검색 결과에 노출하지 않음 |
follow | 페이지 내 링크를 따라가서 크롤링 |
nofollow | 페이지 내 링크를 따라가지 않음 |
nosnippet | 검색 결과에 설명 텍스트(스니펫) 노출 금지 |
robots 태그 실무 활용 예시
로그인 후 접근 가능한 마이페이지, 내부 관리용 페이지, 중복 콘텐츠가 발생하는 필터 결과 페이지 등에 noindex를 설정하면 불필요한 페이지가 검색 결과에 노출되는 것을 막을 수 있습니다.
반대로 중요한 서비스 소개 페이지나 블로그 글에 실수로 noindex가 설정돼 있는 경우도 종종 있습니다. 서치콘솔에서 “제출된 URL이 noindex 태그로 차단됨” 오류가 보인다면 이 태그를 가장 먼저 확인해야 합니다.
이 태그가 없으면 기본적으로 index, follow로 동작합니다. 명시하지 않아도 색인이 되므로, 색인을 막고 싶은 페이지에만 noindex를 선택적으로 적용하는 방식이 일반적입니다.
robots 메타 태그 vs robots.txt, 무엇이 다른가
비슷한 이름이라 헷갈리기 쉽지만 역할이 다릅니다. robots 메타 태그는 특정 페이지 하나에 적용하는 지시어이고, robots.txt는 사이트 전체를 대상으로 크롤러의 접근 자체를 제어하는 파일입니다.
| robots 메타 태그 | robots.txt | |
|---|---|---|
| 적용 범위 | 개별 페이지 | 사이트 전체 또는 특정 경로 |
| 주요 역할 | 색인 여부 제어 | 크롤러 접근 허용·차단 |
| 위치 | 각 페이지 <head> 안 | 사이트 루트 (/robots.txt) |
한 가지 주의할 점은 robots.txt로 크롤러 접근을 막아도 이미 색인된 페이지가 검색 결과에서 사라지지는 않는다는 점인데요. 페이지를 검색 결과에서 완전히 제거하려면 robots 메타 태그의 noindex를 함께 사용해야 합니다.
robots.txt 를 만들기 어려우신 분은 robots.txt 생성 도구를 통해 쉽게 만들어보거나 직접 작성한 robots.txt 가 올바르게 작성된지 걱정이시면 robots.txt 확인 도구를 이용해보세요.
SEO에 영향을 미치는 iframe 사용법
<iframe> 태그는 현재 페이지 안에 다른 외부 콘텐츠(지도, 동영상, 외부 사이트 등)를 삽입하는 태그입니다. SEO 관점에서는 주의해서 써야 하는 태그 중 하나입니다.
title 속성을 반드시 포함해야 합니다. 접근성 기준에서 요구하는 항목이기도 하고, 검색 엔진이 iframe의 내용을 파악하는 데도 활용됩니다. loading="lazy"는 페이지 로딩 속도를 개선하는 데 도움이 됩니다.
iframe 사용 시 SEO 주의사항
검색 엔진은 iframe 내부의 콘텐츠를 현재 페이지의 콘텐츠로 온전히 인식하지 않습니다. iframe 안의 텍스트가 아무리 풍부해도 해당 내용이 페이지 SEO에 기여하지 않는다는 뜻입니다. 따라서 페이지의 핵심 내용은 반드시 일반 HTML로 작성해야 합니다.
성능 측면도 고려해야 합니다. iframe은 외부 리소스를 불러오기 때문에 페이지 로딩 속도를 늦출 수 있습니다. 특히 여러 개의 iframe을 한 페이지에 넣으면 Core Web Vitals 점수, 특히 LCP(가장 큰 콘텐츠 렌더링 시간)에 악영향을 줄 수 있습니다.
구글 지도나 유튜브 영상처럼 필요한 경우에는 loading="lazy" 속성을 추가해 화면에 보일 때만 불러오도록 처리하는 것이 좋습니다. 불필요한 iframe은 제거하고, 꼭 필요한 경우에만 사용하는 것이 SEO와 페이지 성능 양쪽 모두에 유리합니다.
SEO HTML 태그를 고려해서 직접하기 어렵다면?
SEO 최적화를 고려한 홈페이지 업체에 맡기는 게 최선일 수 있습니다. 저희 마켓어댑터는 이러한 SEO HTML 태그를 지켜가며 제작·리뉴얼하고 있습니다. 이로 인해 트래픽 8배 증가 사례를 이뤄낼 수 있었습니다.
다른 홈페이지 제작 업체를 찾아보실 때 위와 같은 요건을 지키며 제작하는 곳을 찾아보시기 바랍니다.