개요
지금까지 만든 프로젝트에 SEO를 지원하기 위한 작업을 설명하겠습니다. 이 블로그에서 소개하는 jekyll 블로그 프로젝트는 다국어 플러그인이 설치된 프로젝트로 진행합니다.
기본적인 설정
기본적으로 <title>과 <description>을 설정해 줍니다.
<head>
...
<title>{{page.title}} - {{page.description}}</title>
<meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
...
</head>
다국어 플러그인을 이용한 SEO 지원
_includes/head.html에 아래에 코드를 넣어줍니다. 테마에 따라 head.html 파일이 존재하지 않는 경우 <head></head>태그 안에 아래에 코드를 복사 붙여넣기 합니다.
<head>
...
{% I18n_Headers %}
...
</head>
- I18n_Headers: 다국어 플러그인으로 사용중인 jekyll-polyglot에서 지원하는 기능입니다.
- 아래와 같은 코드를 생성해 줍니다.
<head>
...
<meta http-equiv="Content-Language" content="ja">
<link rel="alternate" hreflang="ja" href=" https://dev-yakuza.posstree.com/">
<link rel="alternate" hreflang="ko" href="https://dev-yakuza.posstree.com/ko/">
<link rel="alternate" hreflang="en" href="https://dev-yakuza.posstree.com/en/">
...
</head>
SEO 라이브러리를 이용한 지원
SEO를 지원하는 라이브러리를 설치합니다.
SEO 플러그인 설치
아래에 명령어를 이용하여 플러그인를 설치합니다.
gem install jekyll-seo-tag
플러그인를 사용하기 위해 설정합니다.
plugins:
- jekyll-seo-tag
사용법
아래에 코드를 <head> 태그에 작성해 줍니다.
<head>
...
{% seo title=false %}
...
</head>
- {% seo %}: 플러그인가 아래와 같이 변경해줍니다.
<head>
...
<meta name="generator" content="Jekyll v3.7.3">
<meta property="og:title" content="プログラミングでアートを夢見る.">
<meta name="author" content="[email protected]">
<meta property="og:locale" content="ja">
<meta name="description" content="『プログラミングアーチスト、ヤクザ』">
<meta property="og:description" content="『プログラミングアーチスト、ヤクザ』">
<link rel="canonical" href="https://dev-yakuza.posstree.com/">
<meta property="og:url" content="https://dev-yakuza.posstree.com/">
<meta property="og:site_name" content="프로그래밍으로 예술을 꿈꾼다">
<meta property="og:image" content="https://dev-yakuza.posstree.com/assets/images/main.jpg">
<script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script>
<script src="https://pagead2.googlesyndication.com/pagead/js/r20181008/r20180604/osd.js"></script>
<script src="https://pagead2.googlesyndication.com/pub-config/r20160913/ca-pub-7987914246691031.js"></script>
<script type="application/ld+json">
{"url":"https://dev-yakuza.posstree.com/","author":{"@type":"Person","name":"[email protected]"},"description":"『プログラミングアーチスト、ヤクザ』","name":"프로그래밍으로 예술을 꿈꾼다","headline":"プログラミングでアートを夢見る.","@type":"WebSite","image":"https://dev-yakuza.posstree.com/assets/images/main.jpg","@context":"http://schema.org"}
</script>
...
</head>
- title=false: 우리는 타이틀을 별도로 사용하기 때문에 타이틀을 생성하지 않게 하기 위한 옵션을 적용했습니다.
SEO와는 관계없을 수 있지만 twitter에 블로그를 공유할때 카드 타입으로 표시하여 좀 더 매력적인 콘텐츠 공유를 합니다.
아래에 태그에 필요한 값을 채워주세요.
<meta name="twitter:title" content="SEO 지원" />
<meta name="twitter:description" content="jekyll 프로젝트에 SEO를 지원하도록 만들어 보자." />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@DevYakuza" />
<meta name="twitter:creator" content="@DevYakuza" />
- twitter:title: 카드에 표시될 제목입니다.
- twitter:description: 카드에 표시될 설명글입니다.
- twitter:card: 카드에 타입을 지정합니다. summary_large_image, summary, photo 중 하나를 선택할 수 있습니다.
- twitter:site: 웹사이트의 사용자 이름입니다.
- twitter:creator: 카드를 만든 사람의 이름입니다.
참고 사이트
- jekyll SEO plugin: jekyll-seo-tag
제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!
앱 홍보
지금 보고 계신 블로그를 작성하는
관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.
Deku가 개발한 앱을 한번 사용해보세요.Deku가 개발한 앱은 Flutter로 개발되었습니다.관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.
