Portfolio

Search Engine Optimization

💡

웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정

검색 결과에 더 많이 나오게 되면?

방문 트래픽이 늘어나기 때문에 효과적인 인터넷 마케팅 방법 중의 하나로 비용처리 없는 마케팅이라고 할 수 있다.

방법은?

구글, 네이버와 같은 검색 엔진들이 서버에 등록된 웹사이트를 하나하나씩 돌아 다니면서(크롤링) 웹사이트의 HTML 문서를 분석해줍니다. 크롤러는 페이지에서 페이지로 링크를 따라가고, 찾은 콘텐츠의 색인을 생성합니다.

구글과 네이버는 모든 페이지를 찾을 수 있도록 무료로 XML Sitemap 피드를 만들고 제출 할 수 있는 구글 서치 콘솔이나 네이버 서치어드바이저를 제공합니다.

XML Sitemap

크롤링에 사용할 수 있는 사이트의 페이지에 대한 정보를 검색 엔진에 알리는 지도같은 역할, Sitemap의 가장 간단한 형식은 검색 엔진에서 사이트를 보다 지능적으로 크롤링할 수 있도록 각 URL에 대한 추가 메타데이터(마지막 업데이트된 날짜, 변경 빈도, 사이트의 다른 URL에 상대적인 중요도)와 함께 사이트에 대한 URL을 나열하는 XML 파일입니다.

Sitemap.xml


<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"
>
<!--  created with Free Online Sitemap Generator www.xml-sitemaps.com  -->
<url>
<loc>https://minjaekim.netlify.app/</loc>
<lastmod>2023-02-09T18:38:22+00:00</lastmod>
<priority> 1.00 </priority>
<changefreq> weekly </changefreq>
</url>
</urlset>

또한 검색에 노출되고 싶지 않은 내용이 있을때는 robot.txt라는 파일을 통해 크롤러에게 이를 알려줍니다.

robot.txt


User-agent: Googlebot
Disallow: /nogooglebot/

User-agent: *
Allow: /

Sitemap: https://www.example.com/sitemap.xml

이름이 Googlebot인 사용자 에이전트는 https://example.com/nogooglebot/으로 시작하는 URL을 크롤링할 수 없습니다.

그 외 모든 사용자 에이전트는 전체 사이트를 크롤링할 수 있습니다. 이 부분을 생략해도 결과는 동일합니다. 사용자 에이전트가 전체 사이트를 크롤링할 수 있도록 허용하는 것이 기본 동작입니다.

사이트의 사이트맵 파일은 https://www.example.com/sitemap.xml에 있습니다.

검색엔진 최적화를 위한 작업

메타 태그

<title>

<description>

<robots>

<canonical>

여러 URL을 가진 웹페이지가 있을 때, 해당 페이지의 대표 URL을 설정할 수 있는 태그입니다.
각 페이지 별 다른 정보를 가지고 있는 경우 이 태그를 적용 X

오픈그래프(Open Graph) 태그

og:title : 웹페이지 제목

og:description : 웹페이지 상세 설명

og:image : 웹페이지 카드에 나타나는 썸네일 (주로 권장되는 사이즈는 1200x630입니다.)

og:type : 웹페이지 유형

og:url : 웹페이지 주소

트위터 카드(twitter card) 태그

twitter:card - 카드 종류로 앞에서 본대로 summary, photo, player의 값이다.

twitter:url - 트위터 카드를 사용하는 URL이다.

twitter:title - 카드에 나타날 제목

twitter:description - 카드에 나타날 요약 설명

twitter:image - 카드에 보여줄 이미지

하지만

CSR에서는?

CSR에서 사용되고있는 HTML의 body는 비어 있다가 (<div id="root">) 사용자가 해당 부분의 페이지에 접근하면, 클라이언트 서버에서 js 밑 html 태그를 불러오는 형식이기 때문에 사전에 html 정보를 가지고 있지 않습니다. 그래서 검색 엔진이 해당 도메인에 접근할 때 어려움이 있다.

SSR

SSR을 사용하여 사전에 html 문서를 검색 엔진이 찾을 수 있도록 제공하여 SEO를 향상시킬 수 있게 됩니다.

SSR은 서버에서 필요한 데이터를 가져와 사전에 html 파일을 만들게 되고 이렇게 만들어진 HTML 파일을 일부 초기 세팅에 필요한 js와 함께 클라이언트 서버에 보내주게 됩니다. 그러면 클라이언트 측에서는 서버에서 만들어준 문서를 받아 와서 바로 사용자에게 보여줄 수 있게 되는 거죠. 이렇게 SSR을 사용하게 되면 사전에 HTML 문서를 클라이언트 측으로 전달했기 때문에, 페이지 로딩이 빨라지고, 검색 엔진이 사용자의 요청에 따라 검색어를 찾을 때(데이터를 크롤링할 때), 우리의 웹사이트에 해당 검색어가 포함되어 있다면 우리 페이지를 보여주는 효율적인 SEO가 될 수 있습니다.

참고

SEO 기본 가이드: 기본사항 | Google 검색 센터 | 문서 | Google Developers

온라인 콘텐츠를 소유, 관리하여 수익을 창출하거나 Google 검색을 통해 온라인 콘텐츠를 홍보하시나요? 그렇다면 이 가이드를 읽어보시기 바랍니다. 이 가이드는 성장 중인 비즈니스의 소유자, 사이트 수십 개를 관리하는 웹사이트 소유자, 웹 대행사의 검색엔진 최적화 전문가, Google 검색 메커니즘을 열정적으로 연구하는 검색엔진 최적화 개인 전문가를 위해 작성되었습니다.

https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko

검색엔진 최적화(SEO)란? | 요즘IT

웹 기반 서비스를 운영하다 보면, 단순히 서비스의 사용성 자체에만 치중하는 경우가 더러 생깁니다. 하지만 잘 살펴보면 유저 사용성만큼이나 집중해야 할 부분이 있습니다. 바로 SEO(Search Engine Optimization, SEO)라 불리는 검색엔진 최적화입니다. 우리는 궁금한 게 생기면 구글 창(혹은 네이버)을 열고 특정 키워드를 입력해 검색합니다. 이때, 대부분의 사람은 상위 노출된 페이지를 먼저 열람하게 됩니다.

https://yozm.wishket.com/magazine/detail/1540/

prepare_frontend_interview/react.md at main · junh0328/prepare_frontend_interview

해당 문단은 권윤학님의 프레임워크와 라이브러리의 차이 를 바탕으로 만들어졌습니다. 리액트는 자바스크립트의 라이브러리라고 봐야 할까요 아니면, 프레임 워크라고 봐야 할까요? 우선 라이브러리와 프레임 워크의 개념에 대해서 간단하게 설명해 보겠습니다. 프레임워크는 Application 개발시 코드의 품질, 필수적인 코드, 알고리즘, 암호화, 데이터베이스 연동 같은 기능들을 어느정도 구성이 되어있는 뼈대(구조)를 제공하도록 만들어진걸 프레임워크라고합니다.

https://github.com/junh0328/prepare_frontend_interview/blob/main/react.md#SEO%EA%B0%80-%EB%AD%94%EA%B0%80%EC%9A%94

질문들

주영 - 어떤 서버를 본다는 건가요?

크롤러의 동작 원리에 대해 찾아보니 아래와 같은 내용이 있었다.
인터넷에 얼마나 많은 웹페이지가 있는지 알 수 없으므로, 웹 크롤러 봇은 종자, 즉 알려진 URL 목록에서 시작합니다. 먼저 해당 URL에서 웹페이지를 크롤링합니다. 이 과정에서 다른 URL에 대한 하이퍼 링크를 찾게 되면, 다음으로 크롤링할 페이지 목록에 추가합니다.
즉 이미 접근 가능한 서버를 크롤링하면서 하이퍼 링크를 통해 또 찾아들어가는 거였네요

www.cloudflare.com

https://www.cloudflare.com/ko-kr/learning/bots/what-is-a-web-crawler/

승준 - 서치엔진에 등록하지 않으면 안보일까?

위의 내용과 연관되어 등록되지 않아도 검색에 노출될 수는 있습니다. 하지만 어디까지나 SEO는 최적화를 이야기하는 것이라 서치 콘솔같은 곳에 등록을 통해 최적화를 더 진행할 수 있는 것이라고 합니다.

재관 - JS에 접근하여 SEO를 만드는 것에 대해

네이버에서는 (고로 구글도..?) CSR에 대응하여 자바스크립트에 접근해서 색인을 생성한다고 합니다.
그러나 리소스가 많이 들어가는 작업이기에 SSR을 추천한다고 합니다!

SEO (민재)