개요
지금까지 만든 프로젝트에 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
제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!
책 홍보
저도 블로그를 시작한지 1년만에...책을 다 써봅니다...인생에서 이런 날도 오는군요...타국에서 책 출판도 할 수 있고, 참 좋은 세상입니다.
이번에 쓴 책은
아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.
이번에 쓴 책은
스무디 한 잔 마시며 끝내는 React Native입니다. 다양한 예제를 통해 리액트 네이티브를 공부할 수 있도록 구성해 보았습니다. 또한 설치부터 배포까지 실전에서도 사용할 수 있는 내용들을 담고 있습니다.아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.
