포트폴리오를 위한 깃허브 페이지: 템플릿에 Jekyll SEO Tag 사용하기
반응형
깃허브 페이지가 지공하는 플러그인 목록에는 jekyll-seo-tag이 있습니다. 이 플러그인은 검색엔진들이 쉡게 정보를 알아내어 검색결과에 반영할 수 있도록 <HEAD> 태그 안에 들어가는 페이지의 메타정보를 자동으로 입력해줍니다.
첫 페이지 작성
가장 먼저 보이는 첫 페이지인 index.md에는 간단하게 제목만 있는 빈 페이지를 작성합니다:
---
---
# 환영합니다
레이아웃 작성
여기서부터는 리퀴드(Liquid)언어의 문법을 사용합니다. 지킬의 변환 대상이 되는 모든 텍스트 파일에 리퀴드 명령을 사용할 수 있으며 연산({% %})과 출력({{ }})태그로 리퀴드 언어가 작동합니다. SEO 태그는 사용할 위치에 {% seo %}를 사용하면 지킬이 페이지를 변환할 때 자동으로 해당 위치에 필요한 태그를 추가합니다. 레이아웃 디렉토리(_layouts)에 기본 레이아웃을 지정하는 파일인 default.html을 생성합니다. 만든 레이아웃은 페이지의 프론트메타로 레이아웃을 지정하지 않으면 자동으로 선택하는 레이아웃입니다.
_layouts/default.html:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% seo %}
</head>
<body>
{{ content }}
</body>
</html>{{ content }}는 마크다운 문서 등으로 제작한 페이지의 내용으로 변환하는 태그입니다.
SEO 플러그인의 설정
지킬 설정 파일인 _config.yml에 플러그인 설정을 추가하면 지원하는 SEO 태그를 추가할 수 있습니다. 지원하는 설정은 플러그인의 기본 사용법과 [고급 사용법] 문서를 참고해서 착성할 수 있습니다.
_config.yml을 수정하면 지킬 변환엔진을 재실행해야 페이지에 적용됩니다.
title: soma0sd 깃허브 페이지
author: soma0sd
email: soma0sd@gmail.com
# jekyll-seo-tag PLugin
webmaster_verifications:
google: 구글 웹마스터 코드
bing: 빙 웹마스터 코드
locale: ko_Kr반응형
'프로그래밍 > 웹 프로그래밍' 카테고리의 다른 글
| [TypeScript/JavaScript] 직접 벽돌쌓기 형식의 리스트 레이아웃 만들기 (1) | 2022.05.05 |
|---|---|
| 포트폴리오를 위한 깃허브 페이지: 사이트맵과 SASS 사용 (0) | 2022.04.30 |
| 포트폴리오를 위한 깃허브 페이지: VSCode 개발 설정 (0) | 2022.04.29 |
| 포트폴리오를 위한 깃허브 페이지: 로컬 테스트 환경 구성 (0) | 2022.04.28 |
| 포트폴리오를 위한 깃허브 페이지: WSL 개발 환경 구성 (0) | 2022.04.27 |
댓글