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

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

Code Refactoring

목록 보기
5/5

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

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

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

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

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

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

  1. 문법에 맞는 HTML 작성하기
  • 시맨틱 태그를 이용하여 홈페이지를 마크업한다.
  • 잘못된 마크업을 사용했는지 , Google Rich Result 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로 모바일 페이지를 테스트해서 내 홈페이지가 휴대기기와 원활히 호환되 는지 확인한다.
  1. HTTPS 적용하기
  2. 페이지 로딩 속도 높이기
  3. 라이트 하우스 활용하기

4. Code Reactoring

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>
  );

4. 느낀점

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

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

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

예외처리란?( + 적용)

0개의 댓글