[반려견 미용 견적 서비스] refactor 1

refactor

[반려견 미용 견적 서비스] refactor 1 - SEO 설정

cominuna 2025. 4. 19. 00:38

문제점 선정 이유

프로젝트를 진행할 당시 촉박한 일정으로 인해 화면 구성과 기능 개발에 집중할 수밖에 없었습니다.그러다보니 디테일 한 부분까지 챙기지 못했고 SEO에 대한 고려가 조금은 부족했습니다. 프로젝트를 마무리한 이후, 검색엔진에서의 노출이나 메타 정보 설정 같은 부분에 대한 필요성과 중요성을 더욱 인식하게 되었습니다. 따라서 이번 리팩터링에서 SEO 개선이 필요한 이유와 함께, 실제로 적용한 메타 태그들을 정리해보았습니다.

특히 기존 코드에는 기본적인 <title> 외에 메타 정보가 거의 없어서 검색 엔진 노출과 소셜 미디어 공유 시 정보가 부족한 문제가 있었습니다. 이에 따라 페이지의 목적과 내용을 명확히 전달할 수 있는 메타 태그들을 추가하였습니다. 이러한 개선을 통해 검색엔진 최적화는 물론 사용자 경험까지 향상시키고자 했습니다.

HTML 메타 데이터 설정

SEO 리팩터링 과정에서 가장 먼저 개선한 부분은 HTML의 메타 데이터입니다. 기존에는 <title> 외에 검색 엔진과 소셜 미디어에서 페이지 정보를 명확히 전달할 수 있는 메타 태그가 부족했기 때문에, 이를 보완하는 작업이 필요했습니다. 아래는 이번 리팩터링에서 적용한 주요 메타 태그들과 그 역할입니다

1. 기본 메타 데이터 설정

<meta name="title" content="...">
검색 엔진이 페이지의 제목을 보다 정확하게 이해할 수 있도록 도와주는 태그입니다.
<meta name="description" content="...">
페이지의 주요 내용을 요약하여 검색 결과에 노출되며, 클릭률(CTR) 향상에도 영향을 줄 수 있습니다.

2. Open Graph 메타 태그 (OG)

<meta property="og:title" content="...">
페이지가 소셜 미디어에서 공유될 때 보여지는 제목입니다.
<meta property="og:type" content="website">
공유되는 콘텐츠의 유형을 명시합니다.
<meta property="og:image" content="...">
공유 시 함께 보여질 대표 이미지를 설정합니다.
<meta property="og:description" content="...">
공유 미리보기에서 보여질 요약 설명입니다.

사용 이유
Open Graph 태그는 페이스북이나 카카오톡 등 소셜 미디어에서 콘텐츠가 공유될 때 사용자에게 보여지는 미리보기 정보를 설정하기 위해 사용합니다. 이를 통해 콘텐츠의 신뢰도를 높이고 더 많은 클릭을 유도할 수 있습니다.

<meta property="og:title" content="페이지 제목" /> 
<meta property="og:description" content="페이지 설명" /> 
<meta property="og:image" content="이미지 URL" />

3. Favicon과 Apple Touch Icon

<link rel="icon" href="...">
브라우저 탭에 표시되는 작은 아이콘으로 사이트의 브랜드 아이덴티티를 전달하는 데 효과적입니다.
<link rel="apple-touch-icon" href="...">
사용자가 iOS 기기에서 웹페이지를 홈 화면에 추가할 경우 사용되는 아이콘입니다.

4. 기타 수정 사항

<html lang="ko">
기존에는 잘못 설정된 kr 언어 코드를 ko로 수정하여 검색 엔진이 페이지의 언어를 정확히 인식하도록 하였습니다.
<title>
페이지의 제목은 검색 결과 노출에 직접적인 영향을 주는 핵심 요소로, 이 역시 프로젝트 목적에 맞게 명확하게 수정하였습니다.

HTML 수정한 이후 기대할 수 있는 장점

이번 리팩터링을 통해 HTML 메타 데이터를 보완함으로써 다음과 같은 실질적인 효과를 기대할 수 있습니다.

1. 검색 엔진 최적화 (SEO)

메타 태그를 통해 검색 엔진이 페이지의 주제를 보다 정확하게 파악할 수 있게 되어 검색 결과에서의 노출 가능성을 높일 수 있습니다. 특히 <meta name="description">을 활용하면 검색 결과에 요약 정보가 표시되어 사용자의 관심을 끌 수 있습니다.이로 인해 클릭률(CTR) 또한 개선될 수 있습니다.

2. 소셜 미디어 공유 최적화

Open Graph 태그를 활용하면 페이스북이나 카카오톡 등 소셜 미디어 플랫폼에서 콘텐츠를 공유할 때 보다 사용자에게 이해하기 쉬운 미리보기 정보를 제공할 수 있습니다. 이또한 썸네일 이미지, 요약 설명, 제목 등을 명확히 지정해줌으로써 사용자 클릭을 유도하는 데 효과적입니다.

3. 브라우저 및 디바이스 지원 향상

Favicon과 Apple Touch Icon을 설정함으로써 사용자는 사이트를 북마크하거나 홈 화면에 추가할 때 더 친숙하고 일관된 이미지를 경험할 수 있습니다. 이는 브랜드 인지도 향상과 사용자 경험 개선 측면에서 유의미한 효과를 줄 수 있습니다.

참고 사례: 러쉬(LUSH) 공식 홈페이지에 적용된 HTML 메타 태그

러쉬 브랜드 사이트에서 실제 코드를 개발자 도구를 통해 참고하여 공부하였습니다. 러쉬 페이지는 검색 최적화뿐만 아니라 브랜드 이미지 전달을 위한 메타 태그 설정이 매우 꼼꼼하게 구성되어 있습니다. 특히 대표 이미지, SNS 공유용 텍스트, 언어 설정 등 다양한 메타 정보를 통해 다양한 플랫폼에서 일관된 정보를 제공합니다.

네이버 웹마스터 가이드 참고

실제로 네이버에서도 웹사이트의 검색 노출을 최적화하기 위한 가이드를 제공하고 있습니다. 해당 가이드를 참고하면 검색엔진 친화적인 마크업 구조는 물론이고 HTML 태그 설정에 대한 구체적인 기준도 확인할 수 있어 왜 SEO가 중요한지 더욱더 이해할 수 있는 문서였습니다.

네이버 웹마스터 가이드 바로가기

Google Manager Tag(GMT)

Google Tag Manager는 웹사이트에 포함되는 다양한 추적 코드를 효율적으로 관리하고 배포할 수 있도록 도와주는 도구입니다.Google Analytics, 광고 리타겟팅 태그, 전환 추적 코드 등 여러 종류의 마케팅 및 분석 도구를 직접 코드 수정 없이 설정할 수 있게 해줍니다.

구성 요소

GTM을 적용하기 위해서는 HTML 문서 내에 두 가지 주요 코드를 삽입해야 합니다.

1. JavaScript 코드

<script>
   (function (w, d, s, l, i) {
     w[l] = w[l] || [];
     w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
     var f = d.getElementsByTagName(s)[0],
       j = d.createElement(s),
       dl = l != 'dataLayer' ? '&l=' + l : '';
     j.async = true;
     j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
     f.parentNode.insertBefore(j, f);
   })(window, document, 'script', 'dataLayer', 'GTM-TS23FX7S');
</script>

이 스크립트는 Google Tag Manager의 메인 JavaScript 파일을 비동기로 로드합니다.
GTM-TS23FX7S는 사용자가 GTM을 설정할때 부여 받은 고유 Container ID로 실제 프로젝트에 맞게 변경되어야 합니다.
페이지가 로드되면 dataLayer에 이벤트가 푸시되고 GTM이 이 데이터를 바탕으로 태그를 실행합니다.

2. <noscript> 태그

<noscript>
   <iframe
     src="https://www.googletagmanager.com/ns.html?id=GTM-TS23FX7S"
     height="0"
     width="0"
     style="display: none; visibility: hidden"
   ></iframe>
</noscript>

사용자의 브라우저에서 JavaScript가 비활성화되어 있는 경우에도 GTM이 작동할 수 있도록 하는 대체 태그입니다.
iframe을 통해 기본적인 추적 데이터가 전달되도록 설정됩니다.

해당 코드가 수행하는 역할

해당 HTML 파일에 있는 GTM 코드는 GTM이 데이터를 수집 및 관리하도록 설정합니다.

예를들어:

페이지 조회 이벤트 기록
버튼 클릭, 스크롤 등 사용자 상호작용 추적
전환 이벤트(Google Ads, GA4 등) 자동 전송
사용자 맞춤 이벤트를 통한 상세 분석

프로젝트 적용한 GMT 컨테이너 및 반영한 전체 코드

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/svg/favicon.svg" />
    <link type="text/css" rel="stylesheet" href="./src/reset.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="title" content="PEAUTY - 애견 미용의 기준" />
    <meta name="description" content="PEAUTY는 애견 미용의 새로운 기준을 제시하는 서비스입니다. 최고의 미용 전문가와 함께 반려견에게 특별한 경험을 선사하세요." />

    <!-- Refact: Google Tag Manager 반영 -->
    <script>
      (function (w, d, s, l, i) {
        w[l] = w[l] || [];
        w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
        var f = d.getElementsByTagName(s)[0],
          j = d.createElement(s),
          dl = l != 'dataLayer' ? '&l=' + l : '';
        j.async = true;
        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
        f.parentNode.insertBefore(j, f);
      })(window, document, 'script', 'dataLayer', 'GTM-5RBPCTLL');
    </script>
    <!-- End Google Tag Manager -->

    <!-- Refact: Open Graph 메타 태그 반영 -->
    <meta property="og:title" content="PEAUTY - 애견 미용의 기준" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.peauty.com" />
    <meta property="og:image" content="/svg/logo.svg" />
    <meta property="og:description" content="PEAUTY는 애견 미용의 새로운 기준을 제시하는 서비스입니다. 최고의 미용 전문가와 함께 반려견에게 특별한 경험을 선사하세요." />
    <meta property="og:locale" content="ko_KR" />

    <title>애견 미용의 기준 PEAUTY</title>
  </head>
  <body>
    <!-- Refact: Google Tag Manager (noscript)반영 -->
    <noscript>
      <iframe
        src="https://www.googletagmanager.com/ns.html?id=GTM-5RBPCTLL"
        height="0"
        width="0"
        style="display:none;visibility:hidden"
      ></iframe>
    </noscript>
    <!-- End Google Tag Manager (noscript) -->

    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

'refactor' 카테고리의 다른 글

[반려견 미용 견적 서비스] refactor4 - 로그인 로직 (4)	2025.06.20
[반려견 미용 견적 서비스] refactor 3 - 상태관리 (4)	2025.05.16
[반려견 미용 견적 서비스] refactor 2 - 스켈레톤 UI (1)	2025.04.28
[반려견 미용 견적 서비스] PEAUTY 회고 및 리팩토링 방향성 (0)	2025.04.16

현재글[반려견 미용 견적 서비스] refactor 1 - SEO 설정

cominuna 님의 블로그

cominuna 님의 블로그 입니다.

Today :
Yesterday :

일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

cominuna 님의 블로그