SEO란?
SEO는 구글이나 네이버 웹사이트내에서 검색을 할 시 검색엔진 상단에 위치할 수 있습니다.
SEO는 한국어로 검색엔진 최적화입니다. 즉 이를 최적화 한다면 따로 돈을 내지 않고도 최상단의 검색 결과에 노출시키고, 사이트의 트래픽을 높이는 등 효과적인 마케팅 방법입니다.
검색엔진을 최적화를 시키는 것은 중요합니다. 최상단에 위치를 시킴으로서 트래픽을 증가시킬 수 있고 이로인해 많은 방문객들이 오기 때문입니다.
위 사진을 보면 가장 인기있는 검색포털인 구글의 페이지별 트래픽 점유율을 볼 수 있습니다. 1페이지의 경우 91.5%라는 높은 점유율을 기록하지만 2페이지만 가더라도 4%로 많이 떨어지는 것을 볼 수 있습니다.
어떻게 작동하나요?
검색엔진은 주로 구글 봇들이 크롤링을 통해 페이지를 탐색하면서 모든 페이지를 탐색하고 수집한 정보를 기록을 해둡니다. 이후 주제별로 기록을 해둔뒤에 순위를 매깁니다. 이후 사용자가 검색을 하였을 때 이와 같은 순위에 맞춰 검색엔진에 노출을 시킵니다.
이를 위해서 개발자 혹은 사이트 관리자가 할 수 있는 방법은 2가지가 있습니다.
크게 비용을 내고 검색엔진에 노출되는 유료와 무료에 대해서
| 강제 노출 | 자연 노출 | |
|---|---|---|
| 비용 | 유료 | 무료 |
| 흥미도 | 적음 | 많음 |
| 상단 노출 기간 | 돈을 입금을 안할 시에 광고가 내려갑니다. | 입금을 하지 않더라도 상단에 노출됩니다. |
| Human Resources | 결제를 한 이후 사이트 주소를 올리면 됩니다. | robot.txt나 sitemap.xml과 같이 추가로 설정해야 하기에 번거롭습니다. |
위 표를 참고해서 검색결과를 확인할 시에 유료 광고를 통해 최상단에 위치한 광고 사이트 보다 자연적으로 보이는 자연 노출된 사이트가 트래픽이 사람들이 더 많이 몰리는 것을 볼 수 있습니다.
자주 넘어가는 문제점
시맨틱 태그를 사용하지 않는 경우
html으로 페이지를 만든다면 주로 <div/> 일명 "얍"을 사용하여 페이지를 만들기도 합니다. 하지만 html 태그중에는 일명 시맨틱 태그(Semantic Tag)라고 하는 의미가 있는 태그가 있습니다.
물론 해당 태그들은 사용자에게 보이지 않습니다. 하지만 크롤링을 하는 봇의 입장에서 보았을 때는 해당 태그들이 역할을 알려주고 있습니다. 즉 검색엔진의 입장에서 각 태그, 컴포넌트 마다 역할에 대해 더 자세히 알 수 있습니다.
리액트를 사용하는 경우 (SPA의 한계)
리액트를 사용할 경우 SPA의 렌더링을 주로합니다. 하지만 SPA 애플리케이션의 성격상 검색엔진에 노출될 수 있는 확률이 적습니다.
구글 봇은 크롤링을 하기 위해서 페이지에 들어가서 만들어진 <html/>내의 코드들을 가져와서 분석을 합니다. 하지만 react의 경우 정적페이지를 먼저 불러온 이후<div id="root"/>에다가 javascript를 이용하여 페이지를 렌더링합니다.
SPA 애플리케이션은 페이지를 한번에 다운받기 때문에 초기 렌더링 속도가 느린것이 특징입니다 하지만 구글 봇은 기다리지 않고 캡쳐를 하고 지나가기 때문에 만들어져 있는 페이지들을 기록하지 못할 수 있습니다. 때문에 해당 사이트는 <div id="root/>만 남겨진 채로 기록이 되는 것입니다.
최적화를 어떻게 할 수 있을까?
Robot.txt
리액트와 같이 SPA에서의 한계를 극복하기 위해 우리는 봇에게 Robot.txt를 이용하여 방문할 수 있는 사이트임을 알려줄 수 있습니다.
사용하는 대표적인 규칙은 아래와 같습니다. 출처
다른 검색엔진의 로봇에 대하여 수집을 허용하지 않고 네이버 검색 서비스용 검색로봇만 수집 허용으로 설정합니다.
User-agent: * Disallow: / User-agent: Yeti Allow: /
모든 검색엔진의 로봇에 대하여 수집 허용으로 설정합니다.
User-agent: * Allow: /
사이트의 루트 페이지만 수집 허용으로 설정합니다.
User-agent: * Disallow: / Allow: /$
관리자 페이지, 개인 정보 페이지와 같이 검색로봇 방문을 허용하면 안 되는 웹 페이지는 수집 비허용으로 설정해주세요. 아래 예제는 네이버 검색 서비스용 검색로봇에게 /private-image, /private-video 등은 수집하면 안 된다고 알려줍니다.
User-agent: Yeti Disallow: /private*/
모든 검색로봇에게 사이트의 모든 페이지에 대하여 수집을 허용하지 않는다고 알려줍니다. 이 예제는 사이트의 어떠한 페이지도 수집 대상에 포함되지 않으므로 권장하지 않습니다.
User-agent: * Disallow: /
다양하게 조합해서 사용할 수 있습니다.
User-agent: googlebot # googlebot 로봇만 적용 Disallow: /private/ # 이 디렉토리를 접근 차단한다. User-agent: googlebot-news # googlebot-news 로봇만 적용 Disallow: / # 모든 디렉토리를 접근 차단한다. User-agent: * # 모든 로봇 적용 Disallow: /something/ # 이 디렉토리를 접근 차단한다.
sitemap.xml 지정
봇에게 페이지 구성 및 기타 파일의 관계를 알려주고 이로인해 크롤링 과정에서 발견되지 않는 웹페이지를 모두 크롤링할 수 있게 도와줍니다.
sitemap.xml은 웹사이트 내 모든 페이지의 목록을 나열한 파일로 책의 목차와 같은 역할을 합니다. 사이트맵을 제출하면 일반적인 크롤링 과정에서 쉽게 발견되지 않는 웹페이지도 문제없이 크롤링되고 색인될 수 있게 해줍니다. [출처]
기본형식
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.mywebsite.com/page1</loc>
<lastmod>2024-05-01</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>http://www.mywebsite.com/page2</loc>
<lastmod>2024-04-30</lastmod>
<changefreq>weekly</changefreq>
<priority>0.8</priority>
</url>
</urlset><urlset>: 이 태그는 XML 파일 전체를 둘러싸며, 현재 프로토콜 표준을 따라야 합니다. 다시 말해, 이 XML 파일이 사이트맵 데이터를 포함한다는 것을 나타냅니다.
<url>: 각각의 웹 페이지 URL을 정의하는 태그입니다. 이 태그는 반드시 태그 안에 있어야 합니다. 나머지 태그들은 모두 이 태그의 하위 태그로 들어갑니다.
<loc>: 웹 페이지의 URL을 나타내는 필수 항목입니다. 이 URL은 "http" 또는 "https"로 시작하고, 대부분의 경우 슬래시("/")로 끝납니다.
<lastmod>: 해당 웹 페이지가 마지막으로 수정된 날짜를 나타내는 선택적 항목입니다. 날짜 형식은 "YYYY-MM-DD"여야 합니다.
<changefreq>: 웹 페이지가 얼마나 자주 변경되는지를 나타내는 선택적 항목입니다. 변경 빈도는 "always", "hourly", "daily", "weekly", "monthly", "yearly", "never" 중 하나여야 합니다.
<priority>: 해당 웹 페이지가 사이트 전체에서 얼마나 중요한지를 상대적으로 나타내는 선택적 항목입니다. 값의 범위는 0.0에서 1.0까지이며, 기본 값은 0.5입니다.
그룹형식
<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap>
<loc>http://www.mywebsite.com/sitemap_pages1.xml.gz</loc>
<lastmod>2024-05-01T12:00:00+00:00</lastmod>
</sitemap>
<sitemap>
<loc>http://www.mywebsite.com/sitemap_pages2.xml.gz</loc>
<lastmod>2024-05-01T12:00:00+00:00</lastmod>
</sitemap>
</sitemapindex><sitemapindex>: 이 태그는 하나의 sitemap 인덱스 파일을 나타내며, 이 파일에는 여러 개의 sitemap에 대한 정보가 포함됩니다.
<sitemap>: 개별 sitemap에 대한 정보를 나타내는 태그입니다. 이 태그는 안에 있어야 합니다.
<loc>: sitemap 파일의 위치를 식별하는 필수 항목입니다. 보통 이 위치는 sitemap 파일의 URL입니다.
<lastmod>: 선택적 항목으로, 해당 sitemap 파일이 마지막으로 수정된 시간을 식별합니다. 이것은 파일이 변경된 시기를 나타냅니다.
검색엔진최적화(SEO)를 제대로 하고 싶다면 robots.txt와 sitemap.xml과 같은 테크니컬 SEO의 기초를 다진 후, 콘텐츠 SEO에 집중하는 것이 웹사이트 트래픽 유입을 증진시키는데 효과적입니다.
타이틀 / 메타 태그 이용하기
타이틀 태그는 페이지의 제목에 해당되며, 메타 디스크립션은 웹페이지의 중심 내용을 요약하여 설명해주는 역할을 합니다. 웹사이트의 웹페이지들은 각각 다른 내용을 포함하고 있기 때문에 웹페이지별로 독특한 타이틀 태그와 메타디스크립션 태그를 갖고 있어야 합니다.
<title>
ChatGPT
</title>타이틀 태그를 사용한다면 아래와 같이 페이지의 제목으로 사용할 수 있습니다.
오픈 그래프 태그를 이용한다면 메타정보도 같이 공유가 됩니다. 페이스북, 카카오톡, 노션과 같은 소셜미디어에서 웹페이지 URL이 공유될 때 웹페이지의 주요 정보(제목, 이미지, 설명)가 표기되는 방식을 관리해주는 역할을 합니다.
오픈그래프(Open Graph) 프로토콜은 HTML 문서내의 og:로 시작하는 메타태그를 찾아내여 보여주는 프로토콜(규율,약속)이며 페이스북에서 개발하였습니다.
<meta name="description" content="컴포넌트를 만들기 위해서 HTMLAttributes로 넘겨주지 말고 다른 방법으로 효과적으로 넘겨줄 수 있는 방법이 있는데...">
<meta property="og:url" content="https://velog.io/@jihyeong00/TS-컴포넌트를-만들기-위해-완벽한-타입을-주는-방법">
<meta property="og:type" content="article">
<meta property="og:title" content="[TS] 컴포넌트를 만들기 위해 완벽한 타입을 주는 방법">
<meta property="og:description" content="컴포넌트를 만들기 위해서 HTMLAttributes로 넘겨주지 말고 다른 방법으로 효과적으로 넘겨줄 수 있는 방법이 있는데...">
<meta property="og:image" content="https://velog.velcdn.com/images/jihyeong00/post/14df7096-1572-40e6-9be7-36103f5cdd0b/image.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="[TS] 컴포넌트를 만들기 위해 완벽한 타입을 주는 방법">
<meta name="twitter:description" content="컴포넌트를 만들기 위해서 HTMLAttributes로 넘겨주지 말고 다른 방법으로 효과적으로 넘겨줄 수 있는 방법이 있는데...">
<meta name="twitter:image" content="https://velog.velcdn.com/images/jihyeong00/post/14df7096-1572-40e6-9be7-36103f5cdd0b/image.png"> 
오픈 그래프를 이용하여 메타 태그를 공유할 경우 다음과 같이 URL을 통해서 미리보기가 가능합니다.
다음과 같은 기능들을 기억해두면 좋습니다.
og:title: 웹사이트의 제목을 나타냅니다.
og:type: 웹사이트의 종류를 나타냅니다.
og:image: 링크를 공유할 때 표시될 대표 이미지를 지정합니다.
og:url: 링크를 클릭할 때 이동할 정식 URL을 지정합니다.
이미지 및 태그 최적화
구글 검색의 30%는 이미지로 이루어져있습니다. 때문에 검색엔진 최적화를 위해서는 이미지를 최적화 하는 것도 중요합니다.
반응형 디자인 설계하기
해당 서비스를 갑작스럽게 소개한 이유는 라이트하우스에서 제공되는 서비스중에 반응형에 대한 서비스가 있습니다.
2015년 모바일 검색이 데스크톱 검색을 넘어서면서 구글은 모바일 퍼스트 전략을 추구하고 있습니다. 그러다 보니 모바일 최적화는 매우 중요한 구글 SEO 랭킹 요소가 되었고, 우리가 아는 글로벌 회사들은 대부분 모바일 친화적인 웹사이트를 구축해 운영 중입니다.
따라서 SEO를 최적화 하기 위해서는 모바일이나 태블릿과 같은 다양한 기기에서도 사용이 가능하도록 반응형하거나 아니면 모바일과 같이 화면이 작을 경우를 대비하여 다른 페이지를 미리 만들어두는 방법도 있습니다. ex) https//www.naver.com, https://m.naver.com/
끝으로
이처럼 검색엔진을 최적화한다면 최상단에 본인 게시물을 업로드하여, 트래픽을 증가시키고 방문자 수를 늘려볼 수 있습니다.
참고자료
