조코딩 웹개발 5주 완성 2주차 리뷰(1)_도메인 등록, SEO

들어가기에 앞서

벌써 2주차 리뷰 포스트입니다. 이번 조코딩님 강의는 도메인 등록, SEO 등 저도 처음 접하는 내용들이 많아 공부하는 느낌으로 포스트를 작성해보려고 합니다:)

2주차 리뷰 포스트의 목차입니다.

1. 도메인 등록
2. Favicon 등록
3. 검색 엔진에 내 사이트 등록
4. SEO
5. 방문자 분석
6. CSS

이번 주 강의도 열심히 들으시고 다들 원하시는 지식 얻어가시길 바랍니다😀

조코딩님 영상의 Google 클론 사이트 만들기, CSS 꿀팁은 본 포스팅에서 다루지 않았으니 언급된 부분은 영상을 통해서 학습해 주시면 감사하겠습니다:)

p.s. 강의 분량이 너무 많아 2주차 리뷰 포스트는 (1)과 (2)에 걸쳐서 포스팅할 예정입니다.

p.p.s. 에어컨이 고장났는데 5시간동안 거의 쉬지 않고 강의를 해주신 조코딩님께 경의를 표합니다👏

도메인 등록

지난 포스트에서는 Netlify를 통해서 웹 사이트를 배포해봤습니다. 그 과정에서 여러분들은 아마 *.netlify.app이라는 Netlify에서 제공하는 기본 도메인 네임을 사용하여 배포를 완료하셨을 겁니다. 이번 포스트에서는 도메인 판매를 하는 국내 업체인 카페24, 가비아를 통해 도메인을 구매하여 도메인을 등록해 보겠습니다.

p.s. 강의 영상에서는 카페24를 사용했지만 저는 가비아를 통해서 도메인을 구매했습니다.

도메인 구매

다음은 도메인을 구매하는 방법을 알려드리겠습니다.

1. 가비아에 들어가 사용하고자 하는 서브 도메인을 입력합니다.
2. 나온 목록 중 마음에 드는 도메인을 구매합니다.

Netlify에 도메인 등록

다음은 Netlify에서 배포한 웹 사이트를 구매한 도메인으로 등록하는 방법을 알려드리겠습니다.

1. Netlify에서 배포한 웹 사이트 메뉴에 들어가 Set up a custom domain을 클릭합니다.
2. 커스텀 도메인 입력창에 구매한 도메인을 입력하고 Add domain을 클릭합니다. (Netlify에서도 도메인을 판매하기 때문에 도메인을 먼저 구매하시고 등록을 하시길 권장드립니다.)
3. 도메인이 등록되었다면 구매한 도메인 메뉴의 Options-Set up Netlify DNS에 들어가 Verify-Continue를 클릭하고 나오는 네임 서버를 구매한 도메인의 네임 서버로 업데이트합니다.

구매한 도메인의 네임 서버 업데이트

다음은 구매한 도메인의 네임 서버를 업데이트 하는 방법을 알려드리겠습니다.

1. 가비아에 다시 들어가 My 가비아-도메인 통합 관리툴-도메인 정보 변경에 들어가 구매한 도메인을 체크하시고 네임 서버를 클릭합니다.
2. Netlify에서 제시한 네임 서버로 구매한 도메인의 네임 서버를 업데이트합니다.

Favicon 등록

Favicon이란 웹 사이트를 대표하는 아이콘을 말합니다. Favicon은 웹 페이지 제목의 옆에 들어가는 아이콘으로 이 블로그에서는 다음과 같은 아이콘을 사용하고 있습니다.

기존에 아이콘을 가지고 계신 분이라면 해당 아이콘을 사용하셔도 되지만 그렇지 않은 분들을 위해 제가 어떻게 제 웹 사이트의 favicon을 만들고 적용했는지 자세하게 알려드리겠습니다. 해당 favicon은 블로그 이름 위에 걸려있는 메인 이미지로 만들어졌습니다.

1. 아이콘으로 쓸 사진을 준비합니다.
2. Imageonline.co에서 사진을 동그랗게 자릅니다.
3. Real Favicon Generator에 동그랗게 잘린 사진을 업로드합니다.
4. 원하는 설정을 입력 후 Generate your Favicons and HTML code를 클릭합니다. (기존 설정 그대로 적용하셔도 됩니다.)
5. Favicon package를 눌러 zip 파일을 다운로드합니다.
6. zip 파일 압축을 풀어 폴더명을 favicon으로 변경 후 웹 사이트 루트 디렉토리의 assets/imgs로 favicon 폴더를 옮깁니다.
7. 다음 코드를 index.html의 head 태그에 넣습니다.

<link rel="apple-touch-icon" sizes="180x180" href="assets/imgs/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/imgs/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/imgs/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/imgs/favicon/site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

저와 다른 템플릿을 사용하셨을 경우 언급된 폴더가 없거나 이름이 다를 수 있습니다.

p.s. 해당 방법은 제가 favicon을 만들고 적용한 방법 중 하나로 다른 방법을 쓰셔도 무방합니다.

위의 절차들을 모두 완료하시고 배포 파일들을 Netlify에서 업데이트 해주면 다음과 같은 결과물을 얻으실 수 있습니다: duckbankbok.com

검색 엔진에 내 사이트 등록

이번엔 네이버, 구글과 같은 검색 엔진에 웹 사이트가 검색될 수 있도록 등록하는 방법을 알려드리겠습니다.

네이버

1. Search Advisor에 들어가 웹마스터 도구를 클릭합니다.
2. 입력창에 웹 사이트 URL을 입력합니다.
3. 사이트 소유 확인을 위해 HTML 확인 파일을 다운로드하여 루트 디렉토리에 업로드한 뒤 배포 파일들을 업데이트합니다. (웹 사이트 홈페이지 head 태그 안에 제시된 meta 태그를 복사하여 넣으셔도 무방합니다.)

구글

1. Google Search Console에 들어가 웹 사이트 도메인을 왼쪽 입력창에 입력합니다.
2. 1번을 완료하면 나오는 DNS 레코드를 Netlify에서 배포한 웹 사이트 메뉴에 들어가 Options-Go to DNS panel-Add new record를 눌러 나오는 입력창에 입력합니다.

도메인을 구매하지 않고 실습을 진행하시는 분들은 오른쪽 입력창에 도메인을 입력하시고 네이버에 사이트를 등록했을 때와 마찬가지로 HTML 확인 파일을 다운로드하여 루트 디렉토리에 업로드한 뒤 배포 파일들을 업데이트하시면 됩니다.

위의 절차들을 완료하면 네이버와 구글에게 웹 사이트의 소유자임을 인정받을 수 있습니다. 하지만 아직 두 검색 엔진 크롤러가 웹 사이트를 수월하게 탐색하기 위한 최적의 환경을 구축해주기 위해서는 2가지의 파일을 루트 디렉토리에 업로드해야 합니다. 2가지의 파일은 바로 어떤 크롤러를 허용할건지, 웹 사이트의 어떤 페이지를 허용할건지 등의 정책이 담긴 robots.txt와 웹 사이트의 모든 URL들이 어떤 경로에 있는지 정보가 담긴 sitemap.xml입니다.

robots.txt

User-agent: *
Allow: /
Sitemap: https://duckbankbok.com/sitemap.xml

robots.txt의 경우 웹 사이트의 루트 디렉토리에 robots.txt라는 이름의 빈 텍스트 파일을 만들고 그 안에 위와 같은 내용을 입력합니다. 이때 duckbankbok.com 부분은 여러분들의 웹 사이트 도메인으로 넣어주셔야 됩니다.

sitemap.xml

다음은 sitemap.xml입니다.

1. XML-Sitemaps에 들어가 웹 사이트 URL을 입력합니다.
2. 자동으로 생성되는 sitemap.xml을 다운로드받아 웹 사이트의 루트 디렉토리에 업로드합니다.

이렇게 robots.txt와 sitemap.xml을 업로드하고 배포 파일들을 업데이트하면 네이버와 구글의 크롤러가 여러분의 웹 사이트를 탐색할 수 있는 최적의 환경을 구축한 것입니다.

SEO

SEO란? Search Engine Optimization (검색 엔진 최적화)

SEO는 웹 사이트가 검색 엔진에 더 잘 노출되도록 최적화하는 과정입니다. SEO에 영향을 끼치는 요인은 크게 외부적, 내부적 요인으로 구분할 수 있습니다.

외부적 요인: 역링크, 방문자 수, 기간 등
내부적 요인: 시멘틱 마크업, meta 태그 등

그러면 방문자 수, 기간을 제외한 요인들을 하나씩 살펴보겠습니다. 역링크는 다른 웹 사이트에서 하이퍼링크를 통해 저희의 웹 사이트를 언급한 것을 의미합니다. 시멘틱 마크업은 시멘틱 태그(의미있는 태그)들을 활용하여 HTML의 구조를 잘 짜는 것을 의미합니다. HTML을 배우다 보면 글이 들어가는 모든 태그를 div 태그로 대체할 수 있다는 사실을 알게 되는데 이러한 방식보다 제목에는 h1~6 태그, 본문에는 p 태그 등 시멘틱 태그들을 활용하여 태그 안의 내용들이 무슨 역할을 하는지 의미를 잘 전달하도록 문서를 작성하는 것을 시멘틱 마크업이라고 합니다. meta 태그는 head 태그 안쪽에 있는 태그로 문서의 속성을 지정해주는 태그입니다.

외부적 요인들은 역링크, 방문자 수, 기간과 같이 웹 마스터가 단기간내에 해결할 수 있는 문제가 아니기 때문에 가치가 높은 컨텐츠를 꾸준히 웹 사이트에 업로드하는 것이 중요합니다. 하지만 내부적 요인들은 시멘틱 마크업, meta 태그 등 웹 마스터가 단기간내에 개선할 수 있어 웹 사이트를 검색 엔진에 더 잘 노출시킬 수 있는 요인입니다.

SEO Site Checkup은 웹 마스터가 URL만 입력하면 SEO를 위한 개선점들을 알려주는 웹 사이트이니 여러분들도 웹 사이트의 개선해야 되는 점들을 찾아 개선해보시기 바랍니다:)

방문자 분석

다음은 Google Analytics를 활용하여 웹 사이트의 방문자를 분석하는 방법을 알려드리겠습니다.

1. Google Analytics에 들어가 측정 시작을 클릭합니다.
2. 계정 이름, 계정 데이터 공유 설정, 속성 이름 등 세부 설정을 완료합니다.
3. 웹을 클릭한 뒤 웹 사이트 URL을 입력하고 스트림 이름을 입력한 뒤 스트림 만들기를 클릭합니다.
4. 전체 사이트 태그(gtag.js) 웹사이트 작성 도구 또는 CMS에서 호스팅하는 사이트를 사용하는 경우 이 태그 사용를 클릭하여 나오는 코드를 메인 페이지의 head 태그 안에 넣어줍니다.
5. 배포 파일들을 업데이트합니다.

계정 이름, 속성 이름 등의 입력창에는 어떠한 이름을 적으셔도 상관없습니다.