HTML 태그(Tag) Refactoring (feat: SEO)

성찬홍·2023년 10월 30일
Reactnext.jsseo

Code Refactoring

목록 보기
5/5

1. HTML 태그 고치기(feat: 서론)

일을 시작한 이후 회사 코드들을 보면서, 내가 취업 준비를 하면서 만든 포트폴리오의 태그들이 난잡하다는 것을 느끼게 됐다.
프로젝트를 할 때는 일단 내가 생각한 결과물이 나오는 것에만 집중하고, 기능이 잘 굴러가는지에만 집중했던 터라 난잡한 태그들이 많이 존재했다.
그래서 이전 코드들을 하나하나 정리해 보기로 결심했다.

2. 태그를 굳이 수정해 줘야 할 이유는 뭘까?

: 가독성의 문제와 난잡해 보인다는 이유만이라면 꼭 태그를 수정해야 할 이유는 없다고 생각된다.
그러나 우리가 태그들을 잘 써야 하는 가장 중요한 이유가 있다.
바로 문법에 맞는 시맨틱 태그를 이용하여 홈페이지를 마크업해야 SEO에 좋다는 것이다.
SEO는 구글, 네이버 등의 검색 엔진으로부터 웹사이트나 웹페이지에 대한 트래픽의 품질과 양을 개선하는 과정을 말하며, 광고에 가장 중요한 요소이다.

3. 개발자가 신경 써 줘야 할 SEO 요소는?

: 태그 리팩토링 전에 가볍게 개발자가 신경 쓸 수 있는 요소를 정리해 보았다.

  1. 문법에 맞는 HTML 작성하기
  • 시맨틱 태그를 이용하여 홈페이지를 마크업한다.
  • 잘못된 마크업을 사용했는지 Google Rich Results Test를 이용해 디버깅한다.
  1. 고유하고 정확한 페이지 제목 만들기

  • 클릭률을 높일 수 있도록 눈길을 사로잡는 문구를 사용한다.

  • 페이지마다 고유한 title 태그를 사용한다.

  • 제목의 시작이나 끝에 사이트 이름을 포함하고, 나머지 제목은 하이픈(-), 콜론(:), 막대(|)를 사용한다.

  1. 메타 태그 사용하기
  • 가능하면 특정 페이지를 정확하게 나타내는 설명을 작성한다.
  • 모든 페이지를 작성할 수 없는 상황이라면 홈페이지 내 각 페이지에 우선순위를 두어 주요 페이지들만 작성해야 한다.
  • 설명에 콘텐츠 관련 정보를 포함한다.
  1. anchor 태그를 활용한 적절한 키워드 배치하기
  • div, button 태그보다는 a 태그를 이용한다.
  • a href 요소가 없으면 Google은 URL을 크롤링하지 않는다.
  1. 이미지 최적화하기
  • img 또는 picture 태그를 사용한다.
  • CSS를 사용하여 색인을 생성하지 않는다.
  • alt 속성을 사용한다.
  1. 사이트를 모바일 친화적으로 만든다.
  • 반응형 웹 디자인을 적용한다.
  • meta name="viewport" 태그를 사용하여 브라우저에 콘텐츠 조정 방법을 알린다.
  • Google Mobile-Friendly Test로 모바일 페이지를 테스트해서 내 홈페이지가 휴대기기와 원활히 호환되는지 확인한다.

  1. HTTPS 적용하기

  2. 페이지 로딩 속도 높이기

  3. Lighthouse 활용하기

4. Code Refactoring

1-1. 수정 전 코드(메인 화면)
=> 무분별한 div 태그의 남발을 볼 수 있다.

// index.tsx
return (
  <>
    <div className="flex flex-start ">
      <div className="w-1/6 ">
        <div>
          <LeftSideBar data="홈" />
        </div>
        <div>
          <EntranceHistory />
        </div>
      </div>
      <div className="flex flex-col w-5/6">
        <div className="mb-4 mt-2 border-2 border-t-white border-x-white border-b-neutral-100 ">
          <TopMeetingList />
        </div>
        <div>
          <MakeClubModal />
        </div>
        <div>
          {data.map((item, idx) => {
            return <CateClubList data={String(item)} key={idx} />;
          })}
        </div>
      </div>
    </div>
  </>
);

1-2. 수정 후 코드(메인 화면)
=> 무분별한 div 태그를 최소화하고, main 태그를 추가해 주었다.

// index.tsx
return (
  <main className="flex">
    <div className="w-1/6 ">
      <LeftSideBar data="홈" />
      <EntranceHistory />
    </div>

    <div className="flex flex-col w-5/6">
      <TopMeetingList topList={topList} />
      <MakeClubModal />
      {cateList.length === data.length &&
        cateList.map((item, index) => {
          return (
            <CateClubList cateList={item} data={data[index]} key={index} />
          );
        })}
    </div>
  </main>
);

2-1. 수정 전 코드(클럽 컴포넌트)
=> div로 채운 태그들을 볼 수 있다.

// Club.tsx
return (
  <div>
    <div className=" text-center mt-4 font-bold text-[20px] text-[#6A7D7C]">
      활동 중인 Club
    </div>
    <div
      className="w-full bg-white px-4 my-6
      overflow-y-auto h-[30rem] shadow-lg rounded-xl "
    >
      {!isLoading ? (
        <>
          {Array.from({ length: 4 }).map((item, index) => (
            <SkeletonComponent key={index} />
          ))}
        </>
      ) : (
        <>
          {data.length === 0 ? (
            <div className="mx-4 mt-4">가입한 동아리가 없습니다.</div>
          ) : (
            <>
              {data.map((item) => (
                <div
                  className="flex border-2 border-gray-300 bg-white 
                  rounded-lg my-4 py-3 pl-4 px-4"
                  key={item.C_IDX}
                >
                  <div className="mx-2 my-1 ">
                    <FiUsers size={25} />
                  </div>
                  <div>
                    <div>
                      <p className="text-[18px] font-bold">{item.C_NAME}</p>
                    </div>
                    <div className="flex text-[12px]">
                      <p>#{item.C_CATEGORY}&nbsp;</p>
                      <p>#{item.C_CATE_DETAIL}&nbsp;</p>
                      <p>#{item.C_AREA}</p>
                    </div>
                  </div>
                </div>
              ))}
            </>
          )}
        </>
      )}
    </div>
  </div>
);

2-2. 수정 후 코드
=> div를 최소화하고 목적에 맞게 section, ul, li, p 태그 등을 적절히 추가해 주었다.
=> 그리고 SEO의 중요 요소인 h2 태그도 추가해 주었다.

// Club.tsx
return (
  <section className="sm:w-1/2 w-11/12">
    <h2 className="text-center mt-4 font-bold text-[20px] text-[#6A7D7C]">
      {type === "attend" ? "활동 중인 클럽" : "MY Club"}
    </h2>
    {list?.length === 0 ? (
      <div className="mx-4 mt-4">
        {type === "host"
          ? "내가 만든 동아리가 없습니다."
          : "가입한 동아리가 없습니다."}
      </div>
    ) : (
      <>
        {list?.map((item: myPageClubInfo, index) => (
          <div
            key={index}
            className="flex flex-col border-2 border-gray-300 bg-white rounded-lg m-2 p-2"
          >
            <p className="text-center font-bold text-[18px]">{item.C_NAME}</p>
            <ul className="flex justify-center">
              <li>#{item.C_CATEGORY}&nbsp;</li>
              <li>#{item.C_CATE_DETAIL}&nbsp;</li>
              <li>#{item.C_AREA}</li>
            </ul>
          </div>
        ))}
      </>
    )}
  </section>
);

5. 느낀 점

  • 프로젝트를 만들 때는 CSS를 입히는 데 어려움을 겪어서 되는대로 태그들을 추가하고, 가장 편한 div 태그들을 계속 사용했었다. 그래서 만들 당시에는 내가 만든 코드들이기에 알아보는 데는 큰 문제가 없었고, 수정해야겠다는 생각을 하지 않았기에 위의 수정 전 코드들과 같은 결과물이 나왔다.

  • 이제는 SEO라는 중요한 키워드를 알게 됐고, 내가 코딩할 때 신경 써 줘야 할 부분이라는 것을 알기에 항상 생각하며 태그들도 사용해 나가야겠다.

profile
성찬홍
꾸준한 개발자
이전 포스트

예외처리란?( + 적용)

0개의 댓글