“아임웹 = SEO 안 된다”는 말, 진짜일까? 코드로 직접 해결해봤습니다! (비개발자용 코드, 적용 방법 공유)

“아임웹 = SEO에 취약하다”는 말 많이 들어보셨죠?

저도 이번에 TF팀에서 홈페이지 리뉴얼에 참여하고 팀원 분과 SEO 관련 이야기도 나누며, 해결할 수 없는 부분에 한계를 느끼기도 했는데요…
하지만 조금의 코드와 설정만 더해도, 아임웹으로 만든 사이트도 충분히 테크니컬 SEO의 기반을 갖출 수 있습니다.

개발이나 코드를 전혀 몰라도 괜찮아요! (저도 잘 모릅니다.. ^^)
제가 스크립트로 아임웹 온페이지 SEO를 설정한 경험은 짧게 공유드리고, 제가 설정한 코드 모두 알려드려 볼게요!

(바쁘신 분들을 위해 맨 아래 노션 페이지로도 준비했어요!)

더 많이 설정했던 것이나, 이외에도 해결할 방법이 있겠지만
이번에는 크게 3가지로 다뤄보려고 합니다.

🔎 코드로 해결 가능한 SEO 팁 3가지!

상품 상세 페이지에서 상품명을 H1 태그로 설정하기

알고 계셨나요? 확장 프로그램으로 상품 상세 페이지를 살펴봤더니 H1 태그 설정이 빠져있더라구요!
따로 아임웹상에서 설정할 방법이 없어, 코드로 설정해주었습니다!

🦊H1 태그 설정하면 뭐가 좋나요?

검색봇은 사람처럼 예쁜 디자인만 보지 않아요. 코드를 보고 ”어떤 구조로 되어 있는 페이지인지“ 읽어내죠. H1 태그는 콘텐츠의 핵심을 알려주는 ‘제목 표지판’ 같은 존재예요. 도로 위에도 표지판으로 길을 안내해주는 것과 같은 원리라고 생각하면 더 쉽게 느껴지실 거예요!

그래서 이 태그가 제대로 설정되어 있지 않으면, 검색봇은 페이지가 어떤 주제를 다루는지 정확히 인식하지 못하고 검색노출에도 악영향을 미칠 수 있어요.

(검색봇은 아래 첨부한 우측 이미지처럼 웹 페이지를 읽으며 돌아다닙니다👀)

그래서 H1 태그를 설정하여 콘텐츠가 어떤 주제를 다루는지 검색봇이 먼저 이해할 수 있도록 해주어야 해요. 즉, “이게 이 페이지의 핵심이구나!”라고 잘 읽고, 인식하게 해주는 거죠.

단, 하나의 페이지에서는 한 개의 H1 태그만 사용해줘야 해요. 여러 개의 태그가 있으면 검색엔진이 헷갈릴 수 있어요 중요한 주제(상품명, 콘텐츠 제목 등)를 H1으로 설정하고 나머지는 H2, H3 태그 등으로 구조화해주는 게 베스트입니다!

▼ 적용을 원하시면, 아래 코드 그대로 복붙해서 사용하세요! ▼

적용 경로: 아임웹 Admin > 디자인 모드 > 상품 상세 페이지 > ‘코드’ 위젯 추가 > 코드 삽입 > 저장 > 페이지 우측 상단 ‘게시하기’

상품 상세 페이지 H1 태그 설정 코드

<script>
document.addEventListener("DOMContentLoaded", function () {
  const titleWrapper = document.querySelector("div.view_tit");

  if (titleWrapper) {
    // 기존에 h1이 이미 삽입되어 있지 않은 경우만 실행
    const alreadyHasH1 = titleWrapper.querySelector("h1");
    if (!alreadyHasH1) {
      for (let node of titleWrapper.childNodes) {
        // 텍스트 노드만 감지해서 h1으로 감쌈
        if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
          const h1 = document.createElement("h1");
          h1.textContent = node.textContent.trim();
          h1.style.display = "inline"; // 줄 바뀜 방지
          h1.style.fontWeight = "inherit"; // 기존 굵기 유지
          h1.style.margin = "0"; // 기본 마진 제거
          titleWrapper.replaceChild(h1, node);
          break;
        }
      }
    }
  }
});
</script>

콘텐츠에 메타 디스크립션(Meta Description) 적용하기

🐰메타 디스크립션은 설정하면 뭐가 좋나요?

메타 디스크립션, 직역하면 메타 설명은 검색결과에서 페이지 제목 아래에 나오는 요약문이에요.

사실 구글은 이제 메타 디스크립션을 SEO 점수에 포함하지 않고, 구글이 직접 내용을 골라 보여주는 경우도 있지만 그래도 여전히 의미있습니다!
네이버나 다음 등 다른 검색엔진에서는 여전히 중요한 요소로 꼽히기도 해요.

(제일 중요) 그리고 우리 고객은 이걸 보고 클릭 여부를 판단하기 때문에, 잘 쓴 메타 디스크립션은 CTR(클릭률)을 높이는 데 아주 큰 역할을 하기도 합니다. 어떤 내용일지 예상이 가게 만들면서도 핵심 내용은 궁금하게 함으로써 클릭하여 우리 콘텐츠로 유입하게 만들어 보십쇼😎

▼ 적용을 원하시면, 아래 코드 그대로 복붙해서 사용하세요! ▼

메타 디스크립션은 각 콘텐츠마다 달라져야 하기 때문에, 조금 번거롭더라도 코드2는 콘텐츠별로 적용해줘야 해요!

적용 경로1: 아임웹 Admin > 환경설정 > SEO(검색엔진 최적화) > Footer Code > 코드 삽입 > 저장

메타 디스크립션 설정 코드1

<script>
document.addEventListener("DOMContentLoaded", function () {
    // 아임웹 게시글 내에서 'webfit_description' 클래스를 가진 <p> 태그 찾기
    const customDescElement = document.querySelector(".webfit_description");

    if (customDescElement) {
        const descriptionContent = customDescElement.textContent.trim();
        console.log("Description content:", descriptionContent);

        const updateOrCreateMeta = (selector, attr, content) => {
            let metaTag = document.querySelector(selector);
            if (metaTag) {
                metaTag.setAttribute("content", content);
            } else {
                metaTag = document.createElement("meta");
                metaTag.setAttribute(attr, selector.includes("name=") ? "name" : "property");
                metaTag.setAttribute("content", content);
                document.head.appendChild(metaTag);
            }
        };

        updateOrCreateMeta('meta[name="description"]', "name", descriptionContent);
        updateOrCreateMeta('meta[property="og:description"]', "property", descriptionContent);

        // 프론트에서 숨김 처리
        customDescElement.style.display = "none";
    } else {
        console.log("No element with class 'webfit_description' found. Meta description not applied.");
    }
});
</script>

적용 경로2: 아임웹 Admin > 컨텐츠 관리 > 게시물 작성 > 콘텐츠 편집기(콘텐츠 작성 화면) > 코드 보기(</>) > 코드 작성·저장

메타 디스크립션 설정 코드2

/** 임시 문구 부분에 원하는 문구를 넣기
<p class="webfit_description">임시 문구</p>

콘텐츠마다 키워드(Keywords) 삽입하기

아임웹 콘텐츠 편집기 내에도 물론 키워드를 입력하는 칸이 있는데요.

하지만 실제로 확인해보니, 잡히지 않더라구요…! 그리고 해당 콘텐츠에 필요 없는 키워드까지 다 적용되어서 불필요하다고 느껴졌어요.
그래서 개별 콘텐츠마다 설정할 수 있도록 코드를 삽입했습니다.

🐍콘텐츠별 키워드 왜 설정하나요?

요즘은 구글을 포함한 대부분의 검색엔진이 메타 키워드 태그를 직접 순위에 반영하지 않아요. 구글은 공식적으로 ‘무시한다’고 명시했고, Bing(빙) 역시 참고만 할 뿐, 랭킹 요소로 사용하지는 않는다고 밝혔어요.

하지만 네이버, 다음 등 국내 검색엔진은 여전히 참고 요소로 인식하는 경우가 있고, 게시판 구조가 많거나 콘텐츠 주제가 중복되는 경우에는 검색엔진에 콘텐츠 성격을 명확히 전달해주는 힌트 역할을 하기도 합니다.

즉, 점수에 직접 반영되진 않더라도, 검색엔진이 “이 페이지는 이런 주제구나” 하고 이해하기 쉽게 만들어주는 용도로는 지금도 충분히 유효하다는 말이죠!

👉 특히 네이버나 다음 등 국내 검색엔진 노출을 신경 쓰는 브랜드라면, 간단한 코드 설정으로 챙겨두는 걸 추천드립니다!

▼ 적용을 원하시면, 아래 코드 그대로 복붙해서 사용하세요! ▼

키워드는 각 콘텐츠마다 달라져야 하기 때문에, 조금 번거롭더라도 코드2는 콘텐츠별로 적용해줘야 해요!

적용 경로1: 아임웹 Admin > 환경설정 > SEO(검색엔진 최적화) > Footer Code > 코드 삽입 > 저장

키워드 설정 코드1

<script>
document.addEventListener("DOMContentLoaded", function () {
    // 키워드용 클래스 찾기
    const keywordElement = document.querySelector(".webfit_keywords");

    if (keywordElement) {
        const keywordsContent = keywordElement.textContent.trim();
        console.log("Keywords content:", keywordsContent);

        // 메타 키워드 태그 생성 또는 업데이트 함수
        const updateOrCreateMeta = (selector, attr, content) => {
            let metaTag = document.querySelector(selector);
            if (metaTag) {
                metaTag.setAttribute("content", content);
            } else {
                metaTag = document.createElement("meta");
                metaTag.setAttribute(attr, selector.includes("name=") ? "name" : "property");
                metaTag.setAttribute("content", content);
                document.head.appendChild(metaTag);
            }
        };

        // 키워드 메타태그 삽입
        updateOrCreateMeta('meta[name="keywords"]', "name", keywordsContent);

        // 프론트에서 숨기기 (디자인에 영향 없도록)
        keywordElement.style.display = "none";
    } else {
        console.log("No element with class 'webfit_keywords' found. Meta keywords not applied.");
    }
});
</script>

적용 경로2: 아임웹 Admin > 컨텐츠 관리 > 게시물 작성 > 콘텐츠 편집기(콘텐츠 작성 화면) > 코드 보기(</>) > 코드 작성·저장

키워드 설정 코드2

/** 예시 키워드 부분에 원하는 키워드를 넣기
<p class="webfit_keywords">광고,퍼포먼스 마케팅,성과 기반,위픽부스터,AI광고</p>

번외) 아임웹 게시판 내 H태그 스타일 지정하기

Bold 처리, 글자 크기 조절, 중앙정렬 등등… 콘텐츠 작성할 때 매번 상단 스크롤 올려서 바꾸는 거 번거롭지 않으셨나요?

저는 이걸 코드로 미리 스타일을 잡아두었어요.
H태그 스타일이 미리 잡혀있어서 콘텐츠마다 텍스트 사이즈가 달라지지도 않고 훨씬 편하더라구요!

저는 기본적인 내용만 설정해두었는데, 더 적용하고 싶은 스타일이 있으시거나 바꾸고 싶으신 부분이 있으면 GPT에게 요청하면 됩니다✌️

필요하신 분들을 위해 공유드리니, 한 번 적용해 보세요!

▼ 적용을 원하시면, 아래 코드 그대로 복붙해서 사용하세요! ▼

적용 경로: 아임웹 Admin > 디자인 모드 > 적용하고 싶은 게시판이 있는 페이지 > 마우스 우클릭-게시판 설정 > 게시판 상단 코드 이용 > 삽입·저장

H 태그 디자인 설정 코드

<script>
document.addEventListener("DOMContentLoaded", function () {
  // 모든 h2 태그에 26px, bold 적용
  document.querySelectorAll("h2").forEach(el => {
    el.style.fontSize = "26px";
    el.style.fontWeight = "bold";
  });

  // 모든 h3 태그에 22px, bold 적용
  document.querySelectorAll("h3").forEach(el => {
    el.style.fontSize = "22px";
    el.style.fontWeight = "bold";
  });

  // 모든 p 태그에 18px, normal 적용
  document.querySelectorAll("p").forEach(el => {
    el.style.fontSize = "18px";
    el.style.fontWeight = "normal";
  });

  // 리스트 항목 (li)에 18px, normal 적용
  document.querySelectorAll("li").forEach(el => {
    el.style.fontSize = "18px";
    el.style.fontWeight = "normal";
  });

  // 인용문 blockquote에 18px, italic 적용
  document.querySelectorAll("blockquote").forEach(el => {
    el.style.fontSize = "18px";
    el.style.fontStyle = "italic";
  });
});
</script>

이렇게 아임웹 SEO 1편으로 상품 상세 H1 태그 설정·게시판 내 콘텐츠 메타 디스크립션·키워드 3가지를 간략히 공유드렸습니다!

업데이트나 개편 시점에서는 일부 설정이 깨지거나 의미 없어질 수 있지만, 지금은 이 방법으로 설정해두었어요.

아임웹 SEO가 어렵다고 생각했던 분들, 또는 어떤 방식으로 아임웹에 SEO를 적용해야 할지 몰랐던 분들께 조금이나마 도움이 되었으면 하는 마음으로 제 경험을 공유드립니다!

이미 알고 계셨던 분들께서는 제가 잘못 알고 있는 부분이 있거나, 직접 해보시며 더 나은 방식, 더 간편한 방법을 찾으셨다면 언제든 편히 피드백해주세요! 함께 알아가며, 크게 배우겠습니다!

다음 번이 있다면 제가 도움 받았던 게시글이나 SEO 팁, SEO 담당자라면 필수로 알아야 할 확장 프로그램을 공유드려보겠습니다😗
감사합니다 (_ _)

전체 SEO 코드 바로 보기↗

링크드인 1촌 맺기↗