[TIL] 1117 LikeLion🦁 FES 13

이춘구·2021년 11월 17일

멋쟁이 사자처럼 프론트엔드 스쿨

목록 보기

13/18

Favicon

브라우저의 탭을 보면 탭마다 각 사이트를 나타내는 조그마한 이미지가 있는 걸 볼 수 있는데, 이걸 Favicon(favourites+icon)이라고 한다.

Favicon & App Icon Generator에서 쉽게 만들 수 있다.

디바이스들을 제대로 지원하려면 Generate icons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps를 선택해야 하겠지만, 웹사이트에 간단하게 쓸 파비콘을 만드는 것이므로 16x16을 선택해서 Create Favicon을 클릭했다.

생성된 파비콘을 다운로드 받아서 웹사이트의 루트 폴더에 저장한 뒤, HTML문서 <head>에 코드를 붙여 넣어주면 끝이다.

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
        <link rel="icon" href="./favicon.ico" type="image/x-icon" />
        <title></title>
    </head>

Netlify로 배포

Netlify는 웹 호스팅 서비스를 제공하는 업체로

사용법이 간단하고
GitHub, GitLab, BitBucket과 연동이 되며
Https를 지원하기에

정적 웹사이트를 배포하기 아주 적합하다. 심지어 무료다.

배포과정

New Site from Git을 클릭한다.
연동하고 싶은 Git Provider를 선택한다.
인증 과정을 마치고 나면 배포할 사이트의 코드가 있는 저장소를 선택한다.
사이트의 주인과 배포할 브랜치를 선택한 다음, 정적사이트 생성기나 빌드툴을 사용하고 있지 않다면 바로 Deploy site를 클릭한다.
표시된 url로 배포가 완료되었음을 확인할 수 있다.

사이트 이름 변경

Netlify에서 제공한 사이트 이름은 너무 길고 복잡해서 접근성이 떨어지는데, 이를 변경할 수 있는 기능도 제공한다.

해당 사이트의 Domain settings에 들어간 뒤, Edit site name을 클릭한다.
사용가능한 사이트 이름을 입력하고 save하면 바뀐 것을 확인할 수 있다.

하지만 이 방법도 단점이 있는데 뒤에 .netlify.app이 필수로 붙는다는 것이다. 이것도 싫다하면 아래의 커스텀 도메인 설정을 따르면 된다.

커스텀 도메인 설정

가비아에서 최저 550원(수수료 포함)이면 1년간 사용 가능한 도메인을 구매할 수 있다.

도메인 구매

가비아에서 구매하고 싶은 도메인 이름을 검색하면 사용가능한 도메인을 추천해주는데, 그 중 마음에 드는 걸 선택하고 신청하기를 누른다.
신청 정보 단계로 넘어가면 앞의 페이지와 가격이 다르게 나올텐데 기간을 1년으로 설정하면 금액이 제대로 나온다. 양식을 모두 채우고 다음 단계로 넘어간다.
결제 방식을 선택해서 결제가 완료된 뒤 구매가 성공적으로 이뤄졌다면, 얼마 후 도메인 등록이 완료됐다는 문자와 이메일이 온다.

도메인 연결

Netlify에서 사이트 이름을 변경할 때 들어간 메뉴에서 Add custom domain을 클릭한다.
가비아에서 구매한 도메인을 입력하고 Verify를 클릭한다.
아마 아래와 같이 등록할 수 없다는 메시지가 나올텐데 당황하지 말고 Add domain을 클릭한다.
아래의 이미지는 이미 연결이 성공된 후라서 Options 버튼 옆에 Netlify DNS 배지가 나오는데 원래대로라면 Check DNS configuration이라는 경고문이 나올 것이다.
그렇다면 Options의 Go to DNS panel을 클릭한다.
스크롤을 살짝 내려서 Name Servers를 보면 custom hostname 4개가 있을 것이다. 이 창을 그대로 띄워놓고 가비아에 접속한다.
가비아 메인 페이지에서 서비스 관리로 들어간 뒤, 구매한 도메인의 관리툴을 클릭한다.
네임 서버의 설정을 클릭한다.
5번 항목에서 알아낸 custom hostname 4개를 차례로 입력한 뒤, 소유자 인증을 마치고 적용을 클릭한다.
얼마 후, Check DNS configuration이 Netlify DNS로 바뀌면 성공한 것이다.
구매한 도메인으로 접속되는 것을 확인할 수 있다.

addThis을 이용하면 사용자가 현재 페이지를 sns에 공유할 수 있게 하는 버튼을 쉽게 넣을 수 있다.

사이트에 접속해 Get started, it's free를 클릭한다
Share Buttons를 클릭한다
원하는 스타일을 고른다.
Selected by You를 선택하면 어떤 sns의 공유버튼을 넣고 뺄지 결정할 수 있다.
디자인을 커스텀 할 수 있다. 버튼을 동그랗게 만들 수도 있고 sns 이름을 숨길 수도 있다. 결정됐으면 Activate Tool을 클릭한다.
Install Code는 <body>의 마지막 라인에 붙여넣고 Inline의 코드는 공유버튼을 보여주고 싶은 위치에 붙여넣는다.
해당 페이지 하단에 공유버튼이 생긴 것이 확인된다.

광고 부착

카카오 애드핏으로 사이트에 광고를 달 수 있다.

로그인을 한 뒤 광고관리 탭에 들어가 새 매체를 등록한다.
매체명에 사이트의 이름, 매체고유값에 사이트 주소를 입력한 뒤 광고단위 등록을 클릭한다.
부착하려는 광고의 이름을 정해주고 각종 설정을 원하는대로 해준 뒤 스크립트/SDK 발급을 클릭한다.
해당 스크립트를 광고를 부착하고 싶은 페이지에 붙여넣는다.
레이아웃을 위해 <div class="kakao-ad">로 감싸서 넣었다.

사이트 하단에 광고배너가 생긴 걸 확인할 수 있다.

검색 결과 노출

아무리 멋진 웹사이트를 만들었다 한들 사람들이 찾아올 수 없으면 소용 없을 것이다. 검색엔진의 크롤러가 우리의 웹사이트를 잘 찾아올 수 있도록 해야한다.

robots.txt

Robots.txt 소개
어떤 검색로봇에게 어떤 url을 크롤링 할 수 있도록 허락할지 적어둔 파일이다.

네이버 서치 어드바이저에서 로그인 한 뒤, 웹마스터 도구를 클릭한다.

등록한 사이트의 주소를 입력한다.

앞에서 입력한 주소의 사이트가 본인의 소유인지 확인하는 단계다. 본인의 소유라면 사이트의 루트 디렉토리에 파일을 업로드하거나 사이트 HTML 파일을 수정할 수 있을 것이다. 네이버는 당사가 제공한 파일이나 메타태그가 있는지 확인되고, 현재 사이트를 등록하려는 사람이 해당 사이트의 소유자인지 알아낼 수 있다.

사이트의 루트 디렉토리에 HTML 확인 파일을 업로드 하고 Git의 저장소에 push한다.

사이트 소유가 확인되면 아래와 같은 alert 창이 뜬다.

확인 버튼을 누르면 등록할 사이트 주소를 입력하는 페이지로 이동하는데, 아래의 사이트 목록에 우리가 등록한 사이트가 추가된 것을 볼 수 있다. 주소를 클릭하자.

주소를 클릭하면 사이트 관리 페이지로 이동하고 여기에서 검증 탭의 robots.txt를 클릭한다.

클릭하면 아래와 같은 alert창이 뜬다. 수집 요청을 해달라니 해보자

스크롤을 살짝 내려서 수집요청을 클릭한다.

수집요청이 되었다는 alert창이 뜨고 확인을 누르면 robots.txt 정보가 새로고침 되며 수집한 robots.txt의 정보가 나올 것이다...만?

아무 것도 뜨지 않는다. 왜냐면 해당 사이트의 루트 디렉토리에 robots.txt 파일이 없기 때문이다.

스크롤을 조금만 더 내려보면 robots.txt를 간단히 생성할 수 있다.
기본값은 네이버 검색로봇, 수집을 허용합니다로 되어있지만 네이버의 검색로봇(Yeti)뿐만 아니라 모든 검색로봇이 수집을 할 수 있도록 설정해주었다. User-agent는 어떤 검색로봇에게 수집을 허용할지를 의미하고 Allow는 수집을 허용할 파일 경로를 의미한다.다운로드를 클릭하면 robots.txt가 다운로드 된다.

HTML 확인파일과 마찬가지로 다운로드 받은 robots.txt 파일을 사이트의 루트 디렉토리에 업로드 한 뒤, Git 저장소에 push한다.

그리고 다시 수집요청을 하면 아래와 같이 제대로 수집된 것을 볼 수 있다.

sitemap.xml

사이트맵이란 무엇인가요?
sitemap.xml은 검색로봇에게 우리 사이트의 지도를 보여줌으로써 수집을 원활하게 해주는 파일이라고 생각하면 된다.
XML Sitemaps에서 손쉽게 sitemap.xml 파일을 만들 수 있다.

sitemap을 생성하려는 사이트의 주소를 입력하고 START를 클릭한다.

사이트를 크롤링한 결과를 보여준다. 두 개의 페이지가 스캔됐다는 걸 알 수 있다. VIEW SITEMAP DETAILS를 클릭하자

sitemap.xml을 다운로드 할 수 있고 크롤링 된 사이트의 각 페이지 url과 최종 수정일, 우선도를 확인할 수 있다.

해당 사이트는 총 7개의 페이지로 구성되어 있는데 2개의 페이지만 크롤링 됐으므로 나머지 페이지의 정보는 직접 넣어주기로 했다. 아마 5개의 페이지는 루트 디렉토리가 아니라 results라는 폴더에 들어가있기 때문인 것 같다. VSC에서 sitemap.xml을 열어서 5개의 url을 직접 추가해줬다.

수정된 sitemap.xml 파일을 루트 디렉토리에 업로드 한 뒤 Git 저장소에 push 한다.

네이버 웹마스터 도구에 가서 요청 메뉴의 사이트맵 제출 탭으로 들어간다.

사이트맵 URL을 입력하고 확인을 클릭하면 사이트맵이 제출된 것을 확인할 수 있다.

SEO

Search Engine Optimization(검색 엔진 최적화)는 사이트가 검색엔진의 검색결과에 잘 나올 수 있도록 최적화하는 것을 말한다.

SEO Site Check Up

SEO Site Check Up에서 SEO가 얼마나 잘 되어있는지 평가를 받아볼 수 있다.

사이트에 접속한 뒤 평가받을 사이트의 주소를 입력하고 CheckUp을 클릭한다.

사이트의 SEO 점수를 점수로 수치화 해서 보여주는데 물론 높을수록 좋다.

SEO 점수를 높이기 위해서 고쳐야 할 점들을 아주 상세하게 보여준다.

단점은 유료사이트라 그런지, 하나의 사이트를 평가받은 뒤에 얼마간의 시간이 지나야 다른 사이트도 평가받을 수 있다는 점이다.

네이버 웹마스터 도구

네이버에서도 SEO 평가를 해준다. robots.txt와 sitemap.xml을 등록했던 웹마스터 도구의 검증 메뉴에서 웹페이지 최적화 탭으로 들어가준다.

평가할 사이트 주소를 입력하면 결과가 나오는데 SEO Site Check Up에 비하면 내용이 많이 부실한 걸 볼 수 있지만 아래의 문제점만 개선해도 검색에 더 잘 걸릴 수 있을 것이다.

SEO에 영향을 주는 요인

역링크
다른 사이트(ex. naver.com)에 게시된 특정 사이트(ex. cool-jjin.shop)의 링크를 역링크라고 한다. 영향력이 높은 사이트 하나에 걸려있는 것이 자잘한 사이트 여러 곳에 걸려있는 것보다 SEO에 큰 영향을 준다고 한다.
방문자 수
방문자 수가 많을수록 영향력이 높은 사이트이므로 SEO에 좋은 영향을 끼친다.
시멘틱 마크업
사이트의 마크업이 시멘틱하게 짜여있을수록 SEO에 좋은 영향을 준다.
메타태그
메타태그는 사이트에 관한 정보들을 제공해주는 태그로 "이 사이트가 어떤 사이트입니다~"라고 알려주는 정보가 많을 수록 검색엔진에 잘 걸린다.

이춘구

프런트엔드 개발자

이전 포스트

[TIL] 1116 LikeLion🦁 FES 12

다음 포스트

[TIL] 1119 LikeLion🦁 FES 15

1개의 댓글

김풀연

2021년 11월 17일

👍👍

답글 달기