CSS가 SEO에 미치는 예상 밖의 영향 8가지에 대한 구글의 조언

구글 존 뮬러(John Mueller)와 마틴 스플릿(Martin Splitt)은 CSS와 SEO를 주제로 팟캐스트를 통해 인사이트를 제공했습니다.
존과 마틴은 CSS 파일이 검색 엔진 최적화(SEO)에서 중요한 이유, 최신 CSS 프레임워크가 웹페이지에 미치는 영향, 그리고 가상 요소(pseudo-element: HTML 문서에 실제로 존재하지 않는 특정 영역을 마치 요소처럼 선택하여 스타일을 지정할 수 있게 해주는 CSS 선택자)가 SEO에 어떤 영향을 미치는지를 설명하였습니다. 이번 세션은 비주얼 의존도가 높고 모바일 페이지를 분리하여 사용하는 한국어 웹사이트 SEO 담당자와 UX 디자이너에게 유용한 지침이 될 수 있는 내용을 포함합니다.

이번 CSS 토픽은 테크니컬 SEO 전문가 뿐 아니라 비전문가에게도 유익한 내용으로 구성되어 있습니다.

• CSS와 SEO 연결
  자바스크립트만큼 일반적으로 논의되지는 않지만 CSS는 주로 Google의 크롤러가 콘텐츠를 해석하고 색인을 생성하는 방식과 관련하여 SEO에 영향을 미칩니다. Google의 가이드라인에서는 CSS 파일을 크롤링 가능하게 만들 것을 권장합니다.
  
• CSS 파일의 크기
  • CSS 파일 크기는 지난 몇 년간 계속 증가해 왔습니다. 2022년 스타일시트의 평균 크기는 약 68-72kB였습니다.
  • 프레임워크는 종종 사용하지 않는 규칙을 제거하고 파일을 분할하여 크기를 최적화할 수 있지만, 프레임워크로 인해 CSS 파일이 더 커지는 경우가 많습니다.
  • 78MB CSS 파일이라는 예가 언급되었는데, 이는 매우 이례적이고 문제가 될 수 있습니다.
    
• CSS 클래스 네임과 SEO
  • CSS 클래스 네임은 SEO에 직접적인 영향을 미치지 않으며, 순수 스타일링용이며 검색 엔진이 키워드나 순위를 분석할 때 표시되는 텍스트 콘텐츠의 일부로 간주되지 않습니다.
  • 크롤러는 일반적으로 텍스트 콘텐츠의 HTML을 파싱하여 클래스 이름과 같은 속성을 제거합니다.
    
• CSS의 !important 규칙과 SEO의 관계
  • !important는 CSS의 우선순위(specificity) 규칙을 무시하고, 해당 스타일을 강제로 적용합니다.
  • 이는 스타일 충돌을 해결하거나 외부 스타일시트 보다 우선 적용할 때 유용합니다.
  • 이는 복잡한 스타일링 시나리오를 위한 해결책이지만 SEO에는 영향을 미치지 않습니다.
    
• 가상 요소(::before 및 ::after):
  • CSS 가상 요소를 사용하면 개발자가 HTML에 직접 추가하지 않고도 요소의 앞이나 뒤에 아이콘이나 작은 기호와 같은 장식용 콘텐츠를 추가할 수 있습니다.
  • 결정적으로 ::before 또는 ::after 가상 요소를 통해 추가된 콘텐츠는 DOM(문서 객체 모델)에 포함되지 않으므로 Google의 렌더링 및 색인 시스템에 의해 포착되지 않습니다.
  • 권장 사항: 가상 요소는 장식적인 목적으로만 사용하세요. 색인화해야 하거나 의미 있는 컨텍스트를 제공해야 하는 콘텐츠(예: 단어에 해시태그 기호 추가)에는 가상 요소를 사용하지 마세요.
  • 의미나 맥락에 중요한 콘텐츠는 항상 HTML에 직접 추가해야 합니다.
    
• 뷰포트 단위(예: 100vh):
  • 히어로 이미지와 같은 요소에 100vh(뷰포트 높이의 100%)와 같은 단위를 사용하면 Google의 렌더링 미리보기 도구에서 페이지를 표시하는 방식에 문제가 발생할 수 있습니다.
  • 렌더링 중 ‘뷰포트 확장’으로 인해 이러한 요소는 스크린샷에서 불균형적으로 크게 표시되어 실제 콘텐츠가 보이지 않을 수 있습니다.
  • 콘텐츠가 여전히 DOM에 있는 경우 색인화에 직접적인 영향을 미치지는 않지만 디버깅을 더 어렵게 만들고 접근성 문제를 나타낼 수 있습니다.
  • ‘최대 높이’로 제한하는 것이 권장되는 해결책입니다.
    
• CSS로 콘텐츠 숨기기:
  • 과거에는 글꼴 색상을 배경색과 일치시켜 텍스트를 숨기려는 시도가 있었지만 지금은 덜 일반적입니다.
  • 최신 숨기기 기법에는 종종 display: none;이 포함되어 시각적 레이아웃에서 요소를 효과적으로 제거하며 일반적으로 검색 엔진을 위한 렌더링된 DOM에서도 요소를 제거합니다.
    
• CSS 이미지와 HTML img 태그 비교:
  • CSS 이미지(배경 이미지 속성)는 주로 필수 콘텐츠를 전달하지 않는 장식 요소를 위한 것입니다. 검색 엔진에서 이미지로 색인되지 않습니다.
  • 페이지의 의미를 부여하고 필수적인 콘텐츠 이미지(예: 제품 사진, 뉴스 기사의 이미지, 그래프)에는 HTML img 또는 picture 태그를 사용해야 합니다.
  • 이러한 이미지는 DOM의 일부이며 이미지 검색으로 색인화할 수 있고 크롤러가 그 맥락을 이해할 수 있습니다.
    
• 원칙적 선언: 가장 중요한 원칙은 CSS는 스타일링을 위한 것이고 HTML은 콘텐츠를 위한 것입니다. 특히 중요한 콘텐츠를 CSS에 넣는 등 이러한 역할을 혼용하면 검색 엔진의 이해와 접근성을 저해할 수 있습니다.
  
• 표 형식 데이터용 CSS:
  • 표 형식 데이터에 표와 같은 레이아웃을 만들기 위해 CSS를 사용하는 것은 일반적으로 잘못된 사용입니다.
  • 실제 표 형식 데이터의 경우 검색 엔진(및 스크린 리더)이 행과 열을 인식하여 구조화된 정보를 더 잘 이해하고 색인을 생성할 수 있으므로 HTML <table> 요소를 사용하는 것이 좋습니다.
    

전체 에피소드 또는 스크립트를 다운로드하시려면 방문하세요.