SEO가 다입니다.
네, 정말이에요. SEO가 다 입니다. 올인 해야 해요. SEO는 Search Engine Optimization 의 약자로 웹개발의 끝판왕입니다. 백 날 서비스나 컨텐츠 만들어봤자 아무도 안보면 꽝입니다. 우리가 네이버봇 예티와 구글봇인 구글신님 그리고 빙봇, 다음봇 뭐.. 우리 웹페이지를 들락날락 하는 봇들은 많습니다. 그 봇들이 어떤 알고리즘으로 우리 페이지를 평가하는지는 모르지만, 그래도 통상적으로 알려져 있는 지켜야할 수직은 몇가지 있습니다.
읽기에 불편하지 않을 정도로 빠를 것
- TTFB 1초 미만
- 유의미한 렌더링을 2초 안에
이 정도면 속도는 될 것 같습니다.
- 그리고 읽을만 할 것
- Breadcrumb을 사용할 것
- 백링크중 깨진 링크가 없을 것
- 모바일 반응형이거나 모바일 페이지가 따로 있을 것
- 글자가 너무 작지 않을 것
- SSL을 사용할 것
- Webp 등으로 압축한 이미지를 제공할 것
- 이미지 크기를 맞추어 제공해 늘리거나 줄이지 말 것
- 전문성이 있을 것
- 글만 쓰지 말고 사진도 넣을 것
- 사진만 넣지 말고 글도 쓸 것
- 비어있는 카테고리나 페이지는 렌더링 하지 말것
- Robots.txt를 제공해 어딜 수집할지 알려줄 것
- 사이트맵을 제출할 것
- SSL로 보호되지 않은 URL로 JS를 이용해 이동시키거나 데이터를 전송하지 말 것
- 컨텐츠는 gzip으로 압축할 것
- 올바른 메타 테그를 가질 것
겁나 많습니다. 여기서 Robots.txt 설정과 Meta 테그 설정을 다뤄보겠습니다. 나머지도 천천히 다 포스팅 하겠습니다~
1. robots.txt를 제출할 것!
보통 robots.txt 를 '루트URL/robots.txt' 여기서 가져갑니다. Django에서 구현하는 방법은 2가지가 있는데.. 우선 NginX 레벨에서 리다이렉트 해주는 부분이 있고 또 하나는 Django 레벨에서 파일을 읽어서 줄 수 있습니다. NginX 레벨에서 리다이렉트 해주는 것은 귀찮으므로.. Django 레벨에서 하는 법을 살펴 보겠습니다.
우선 프로젝트 root 폴더 안에 robots.txt를 만듭니다. urls.py 가 있는 폴더가 아니라 그 상위 폴더 입니다.
User-agent: *
Disallow: /abc
Disallow: /xyz
Disallow: /api
Disallow: /error
Allow: /
User-agent: Mediapartners-Google
Allow: /
User-agent: bingbot
Crawl-delay: 30
저는 위처럼 만들어 주었습니다. 보안을 위해서나, 굳이 왔다갔다 안해도 되면 Disallow에 추가하시면 됩니다.
# urls.py urlpatterns = [
... path('robots.txt', views.robots), ...
]
아래는 views.py 내용입니다.
from project import settings
import os
def robots(request):
f = open(os.path.join(settings.BASE_DIR, 'robots.txt'), 'r')
file_content = f.read()
f.close()
return HttpResponse(file_content, content_type="text/plain")
이렇게 하면 끝입니다. 그럼 django를 이용하여 txt 파일을 보여줄 수 있습니다.
2. 메타데이터 설정
여기서 구글 서치 콘솔이나, 네이버 웹마스터 도구에서 사용하는 것은 다루지 않습니다. 우선 등록했다고 치고, 올바르게 봇들이 수집할 수 있도록 도와주는 방법을 설명하겠습니다.
**실제 base.html 발췌
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="naver-site-verification" content="fe06e7268ace31cc195ca10383bf470d8807379e"/>
<title>
{% repeated_block title %}{% endblock %} | {% repeated_block small_title %} {% endblock %} | 딩그르르
</title>
<meta name="description" content="{% repeated_block description %}{% endblock %}">
<meta name="keywords" content="{% block keywords %}{% endblock %}">
<meta property="og:url" content="https://dingrr.com{{ request.get_full_path }}">
<meta property="og:image" itemprop="image primaryImageOfPage" content="{% static 'favicon.png' %}">
<meta name="twitter:description" property="og:description" itemprop="description" content="{% repeat description %}">
<meta name="twitter:title" property="og:title" itemprop="name" content="{% repeat title %} | {% repeat small_title %} | 딩그르르">
{% cache 86400 base_header %}
<meta property="og:type" content="website">
<meta property="og:site_name" content="딩그르르-dingrr.com">
<meta name="twitter:card" content="summary">
<meta name="twitter:domain" content="dingrr.com">
위는 Dingrr의 실제 base.html에서 발췌한 내용입니다. 아마 생소한게 눈에 띄실텐데요. {% repeated_block %} 이라는 것이 보이시지요? {% block %}은 같은 이름으로 여러번 들어올 수 없습니다. 그래서 django-macros 라는 라이브러리를 사용하면 저렇게 여러번 쓰는게 가능합니다. 링크를 걸어 드릴테니 한 번 둘러 보셔요.
주목할만한 메타 테그는
- description
- keywords
- 그리고 og property
twitter는 신경 안쓰기는 합니다만, 그냥 넣었습니다.
우선 수많은 사람들이 웹을 만들고 그래서 양식도 틀도 가지 각색이라 이런 비 정형적인 정보를 그래도 그나마 정형적으로 명시하도록 메타데이터를 쓰게 하고 있습니다. 검색브라우저나 검색 로봇에게 이런 메타데이터를 알려주면 조금 더 올바르게 알맞은 사람에게 우리 웹페이지를 보여주겠지요?
이 문서의 간략한 내용이나 적어도 제목 정도를 description 에 넣어 주고요. 그리고 keywords에 키워드를 넣어줍니다. 그럼 검색 로봇들이 들어와서 이것부터 확인하고 '아 우선 이문서는 이거에 관한 거군?' 하고 크롤링을 시작합니다. 이미 많이 사용하고 계실거에요. 거의 공식처럼 사람들이 사용하니까요.
자 그럼 og는 뭐g?
이 표기 방법은 페이스북의 오픈그래프 프로토콜을 사용하는 방법 입니다.
페이스북이 기존 메타정보를 토대로 대표 url이나, 문서 종류, 제목, 설명 등등등을 쉽게 표시하기 위해 만들어 냈습니다. 근데 편하고 심플해서 페이스북, 카카오, 네이버 등 많은 데에서 사용하고 있지요. 그렇게 og를 페이스북이 만든 것 처럼 트위터를 위한 twitter 태그가 있다고 보시면 됩니다.
웹페이지를 만들어 보신 분들은 그걸 카카오톡으로 공유하면 얼마나 다른 사이트 처럼 이미지 빡! 뜨고 멋진 설명 들이 왜 안뜨지? 생각 해보셨을꺼에요. 저 og를 사용해주면 아래처럼 됩니다. 위에 있는 소스 코드와 비교해 보셔요.
twitter 안에서 페이지를 링크하면 작은 카드가 생깁니다. 그런 카드에 들어가는 내용들을 정리해서 알려주는 것이 트위터 태그에요. 이렇게 한꺼번에 정의 해 줄수도 있습니다.
<meta name="twitter:description" property="og:description" itemprop="description" content="{% repeat description %}">
<meta name="twitter:title" property="og:title" itemprop="name" content="{% repeat title %} | {% repeat small_title %} | 딩그르르">
아래와 같이 많은 것을 정의할 수 있습니다.
<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
<meta name="twitter:card" content="summary_large_image">
<!-- Non-Essential, But Recommended -->
<meta property="og:site_name" content="European Travel, Inc.">
<meta name="twitter:image:alt" content="Alt text for image">
<!-- Non-Essential, But Required for Analytics -->
<meta property="fb:app_id" content="your_app_id" />
<meta name="twitter:site" content="@website-username">
검색 로봇들에게 잘 보여서 도메인 값 많이 많이 올리세요! (집 못사니까 도메인(온라인부동산) 값이라도.. ㅜ)