검색엔진 최적화.
각 페이지에 명확한 제목 개요, 설명이 있는 이미지, 빠른 로드, 좋은 메타데이터를 제공하면 검색엔진이 이해하고 순위를 매깁니다. DXPR Builder는 페이지를 body 필드의 HTML로 저장하므로 Drupal의 SEO 모듈이 그대로 작동합니다. 이 페이지에서는 빌더에서 설정하는 항목과 해당 모듈로 설정하는 항목을 설명합니다.
제목 개요 만들기
레이아웃 요소(섹션, 행, 열)는 일반 div
요소입니다. 검색엔진은 빌더 페이지의 구조를 제목에서 읽습니다.
| 수준 | 용도 |
|---|---|
| Heading 1 | 페이지 제목. 페이지당 하나. 대부분의 테마에서 출력됨 |
| Heading 2 | 주요 섹션 |
| Heading 3 | Heading 2 안의 하위 섹션 |
| Heading 4 to 6 | 더 깊은 하위 섹션 |
- Text 요소를 클릭하세요.
- 툴바의 제목 목록에서 수준을 고르세요.
- 수준을 순서대로 유지하세요. Heading 2에서 Heading 4로 건너뛰지 마세요.
DXPR CMS에서는 단일 페이지에서 테마 제목을 숨길 수 있습니다. 편집 폼에서 DXPR Theme Settings(을)를 열고, DXPR Hide Regions 아래의 Page Title(을)를 선택한 뒤 Save(을)를 클릭하세요. 그러면 빌더 Heading 1이 페이지의 유일한 Heading 1이 됩니다.
Jumbotron Title(은)는 항상 Heading 1이므로, Jumbotron은 테마의 페이지 제목 옆에 두 번째 Heading 1을 추가합니다. Card Title(은)는 항상 Heading 5입니다.
모든 이미지에 설명 달기
- 이미지를 가리키고 More > Settings(을)를 클릭하세요.
- 이제 SEO 패널을 열고 Alt attribute에 짧은 설명을 입력하세요. 125자 이내가 좋습니다.
- 대화상자에서 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 하나, alt 텍스트 없는 이미지 없음, 메타 설명이 확인됩니다. 페이지
소스에서는 제목이 h2와 h3(으)로 순서대로 표시됩니다.
깨끗한 감사 결과가 나오지 않는 경우
- 감사에서 alt 텍스트 없는 이미지가 보고됩니다. Image 요소의 Alt attribute이 비어 있습니다. SEO 아래에서 입력하세요.
- 감사에서 메타 설명이 없다고 보고됩니다. Drupal 코어는 설명을 추가하지 않습니다. Metatag을 설치하고 콘텐츠 유형이나 페이지의 설명을 설정하세요.
- 감사에서 큰 이미지가 보고됩니다. 이미지에 Original image (No resizing)(을)를 사용 중입니다. 각 Image 요소에서 Optimize for fast loading(을)를 고르세요.
다음 단계
Accessibility for inclusive content 문서에서 DXPR Builder 탐색을 계속하세요.