검색 엔진이 페이지를 찾게 하기.

DXPR Builder 배우기페이지 만들기튜토리얼 따라 하기

각 페이지에 명확한 제목 개요, 설명된 이미지, 빠른 로딩, 좋은 메타데이터를 갖추어 검색 엔진이 이해하고 순위를 매기게 합니다. DXPR Builder는 페이지를 본문 필드의 HTML로 저장하므로 Drupal SEO 모듈이 그대로 함께 작동합니다. 이 페이지에서는 빌더에서 설정하는 항목과 해당 모듈로 설정하는 항목을 다룹니다.

제목 개요 만들기

레이아웃 요소(섹션, 로우, 컬럼)는 일반 div 요소입니다. 검색 엔진은 빌더 페이지의 구조를 제목에서 읽습니다.

Level Use
Heading 1 페이지 제목, 페이지당 하나. 대부분의 테마가 출력합니다.
Heading 2 주요 섹션입니다.
Heading 3 Heading 2 안의 하위 섹션입니다.
Heading 4 to 6 더 깊은 하위 섹션입니다.
  1. Text 요소를 클릭합니다.
  2. 도구 모음의 제목 목록에서 수준을 고릅니다.
  3. 수준을 순서대로 유지합니다. Heading 2에서 Heading 4로 건너뛰지 않습니다.

DXPR CMS에서는 한 페이지의 테마 제목을 숨길 수 있습니다. 편집 양식에서 DXPR Theme Settings를 열고 DXPR Hide Regions 아래에서 Page Title을 체크한 뒤 Save를 클릭합니다. 그러면 빌더 Heading 1이 페이지의 유일한 Heading 1이 됩니다.

Jumbotron의 Title은 항상 Heading 1이므로 테마 페이지 제목 옆에 두 번째가 추가됩니다. Card의 Title은 항상 Heading 5입니다.

모든 이미지에 설명 달기

  1. 이미지를 가리키고 More > Settings를 클릭합니다.
  2. 다음 패널을 열고 짧은 설명을 입력합니다. SEO 패널을 열고 Alt attribute에 짧은 설명을 입력합니다. 되도록 125자 미만으로 씁니다.
  3. 대화상자에서 Save를 클릭한 뒤 컨테이너 표시줄에서 Save를 클릭합니다.

비어 있는 Alt attribute는 alt를 전혀 쓰지 않습니다. 정보를 추가하지 않는 사진에는 대신 섹션 Background image를 사용합니다.

Drupal 모듈로 메타데이터 추가하기

다음 모듈은 노드에 적용되므로 별도 설정 없이 빌더 페이지를 포함합니다.

  • Metatag: 페이지 제목, 설명, Open Graph 태그입니다.
  • Pathauto: 읽기 쉬운 URL 경로입니다.
  • Simple XML Sitemap 또는 XML Sitemap: 사이트맵의 빌더 페이지입니다.
  • Schema.org Metatag: 구조화된 데이터입니다.

페이지 빠르게 유지하기

검색 엔진은 페이지 속도를 순위에 반영합니다.

  • Image 요소에서 이미지 크기로 Optimize for fast loading을 고릅니다. 이미지를 너비 1024픽셀로 조절하고 WebP로 저장합니다.
  • 빌더 페이지의 모든 이미지는 페이지와 함께 로드됩니다. Image 요소는 지연 로딩을 하지 않습니다. 큰 이미지는 페이지에 필요한 것만 둡니다.
  • 각 Video 요소에 Image를 지정합니다. 방문자가 클릭해야 플레이어가 로드됩니다.
  • Drupal 페이지 캐시를 켜 둡니다.

자세한 내용은 다음을 참조합니다. Performance에서 각 페이지가 로드하는 항목을 확인합니다.

  • 설명적인 링크 텍스트를 사용합니다("Read our pricing guide", "Click here" 아님).
  • 방문자에게 출발 페이지가 필요할 때만 외부 링크를 새 탭에서 엽니다.
  • 내부 링크에는 /about 같은 상대 URL을 사용하여 스테이징과 프로덕션에서도 링크가 계속 작동하게 합니다.
  • 깨진 링크를 정기적으로 확인합니다.

표시 내용

브라우저 Lighthouse 패널의 SEO 및 Performance 보고서 같은 페이지 감사를 실행하면 Heading 1 하나, 대체 텍스트 없는 이미지 없음, 메타 설명이 나옵니다. 페이지 소스에는 제목이 h2와 h3 순서대로 표시됩니다.

감사가 깨끗하지 않은 경우

  • 감사에서 alt 텍스트가 없는 이미지를 보고합니다. Image 요소의 Alt attribute가 비어 있습니다. SEO 아래에 입력합니다.
  • 감사에서 메타 설명이 없음을 보고합니다. Drupal 코어는 추가하지 않습니다. Metatag을 설치하고 콘텐츠 유형이나 페이지에 설명을 설정합니다.
  • 감사에서 큰 이미지를 보고합니다. 이미지가 Original image (No resizing)를 사용합니다. 각 Image 요소에서 Optimize for fast loading을 고릅니다.

다음 단계

Accessibility for inclusive content에서 DXPR Builder 탐색을 계속합니다.