[Django SEO] 검색엔진 Friendly!

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 라는 라이브러리를 사용하면 저렇게 여러번 쓰는게 가능합니다. 링크를 걸어 드릴테니 한 번 둘러 보셔요.

>> django-macros Github

주목할만한 메타 테그는

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">

검색 로봇들에게 잘 보여서 도메인 값 많이 많이 올리세요! (집 못사니까 도메인(온라인부동산) 값이라도.. ㅜ)

[[a.original_name]] ([[a.file_size | fileSizer]])

1. robots.txt를 제출할 것!

2. 메타데이터 설정

좋아요[[ postLike | likePlus ]]

공유