SEO를 위한 메타태그 이해하기 – 웹 코딩 강좌

오늘은 단순 코드보다 더 중요한 개념인 SEO에 대해서 배워보겠습니다. SEO란 검색엔진 최적화인데, 구글 같은 검색 포털 사이트에서 어떻게 해야 특정 키워드로 내가 만든 웹사이트가 검색 결과에서 상위에 노출될 수 있는지 이런 부분을 좌우하는 개념입니다.
동일한 퀄리티의 콘텐츠라는 가정하에 SEO에 좋으려면 구글봇이 내 사이트에 방문해서 크롤링을 통해 색인에 저장할 수 있도록 코드를 짜야 합니다.

영상을 통해 기본 개념인 index, 크롤링, 크롤러, 구글봇에 대해 배워보고, 메타 태그와 오픈 그래프에 대해서도 배워보겠습니다.
추가로 웹사이트의 구조에 담긴 정보 계층에 따라 크롤링을 잘 할 수 있도록 시멘틱 태그로 마크업 작업을 해줘야 합니다. 관련해서 잘 되어있는지 볼 수 있는 헤딩스맵이라는 크롬 확장 프로그램도 소개해드릴게요.

오픈 그래프 – https://ogp.me/
헤딩스맵 구글 크롬 확장프로그램 – https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi

예제 다운은 멤버십 회원 커뮤니티에 올린 링크에서 받으실 수 있습니다.

*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.

핵심 요약

본인이 열심히 만든 웹 사이트, 열심히 작성한 글의 점수가 높아야 구글 혹은 네이버, 다음 같은 포털 사이트에서 검색시에 상위에 노출되는 겁니다. 그래서 SEO가 매우 중요하겠죠? SEO 점수가 높은 경우에는 특정 키워드 검색시에 우선 순위에 노출되기도 하고, 저 멀리 노출이 안되는 경우도 있습니다. SEO를 위해 코드를 짜기 전에 어떤식으로 동작을 하는지 한번 알아보도록 하죠.

index (색인) : 구글에서는 모든 웹페이지를 색인이라는 곳에 저장을 합니다. 예를 들어, 디자인베이스에서 이런 글을 최근에 작성해서 올렸다고 가정을 해볼게요. 그러면 고유의 url이 색인에 저장되는 겁니다. http://designbase.dothome.co.kr/webcoding-22/

크롤링 : 크롤링 많이 들어보셨죠?! 특정 웹사이트에서 데이터를 추출해내는 것을 말하는데요. 신규 또는 업데이트 된 웹페이지를 찾는 과정에서 새 페이지를 찾으면 색인에 저장을 합니다.

크롤러 : 웹에서 페이지를 크롤링한 이후에 색인을 생성하는 자동 소프트웨어입니다.

Googlebot : 구글 크롤러의 이름입니다.

<!-- 크롤러 색인 허용 -->
<meta name="robots" content="index,follow">

추가로 SEO (검색엔진 최적화)를 위한 HTML 태그를 소개해드릴게요.

HTML에서 타이틀과 디스크립션, 키워드를 입력하면 크롤러가 웹사이트에 왔을 때 핵심 정보를 인식해서 색인에 저장할 수 있도록 도와줍니다. 타이틀 같은 경우는 보통 40자 정도 안으로 적어야 됩니다. 디스크립션은 160자 이내를 선호하지만, 특정 키워드를 반복해서 사용해도 순위에 크게 영향을 끼치지 않습니다.

<title>메타태그</title>

<!-- 웹 페이지에 대한 설명(description)을 정의하는 예제 -->
<meta name="description" content="HTML meta tag page">

<!-- 검색엔진을 위한 키워드(keyword)를 정의하는 예제 -->
<meta name="keyword" content="HTML, meta, tag, element, reference">

추가로 오픈 그래프를 입력해주면 페이스북이나 트위터, 카카오톡 등 게시물을 공유할 때 해당 정보들을 통해서 카드 형식으로 공유됩니다.

<!-- 소셜 미디어 Open graph 정보 -->
<meta property="og:type" content="website">
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:image" content="페이지 썸네일 이미지 주소">
<meta property="og:url" content="페이지 주소">

<meta property="twitter:card" content="summary">
<meta property="twitter:title" content="페이지 제목">
<meta property="twitter:description" content="페이지 설명">
<meta property="twitter:image" content="페이지 썸네일 이미지 주소">

추가로 웹사이트 마크업 작업을 할 때 HTML에서 시멘틱 태그로 구분되도록 잘 짜면 크롤러가 색인하는 데 더욱 좋습니다. 예를 들면 이런 식이죠. 상단에 추천드린 헤딩스맵을 통해서 웹사이트의 정보구조가 위계에 따라 잘 배치가 되어있는지 확인할 수 있습니다.

<header>
	<h1><a href=""></a></h1>
	<nav></nav>
</header>

<main>
	<section>
		<h2></h2>
		<ul>
			<li>
				<img src="" alt="">
				<h3></h3>
				<p></p>
			</li>
			<li>
				<img src="" alt="">
				<h3></h3>
				<p></p>
			</li>
			<li>
				<img src="" alt="">
				<h3></h3>
				<p></p>
			</li>
		</ul>
	</sction>
</main>
<aside></aside>

<footer>
</footer>

여기까지가 SEO 관련해서 코드로 해결할 수 있는 부분이고, 추가로 알아두면 좋은 개념은 바로 백링크 입니다. 해당 글(고유주소 url)이 다른 웹사이트에 얼마나 많이 공유됐는지를 가지고 유용한 콘텐츠임을 판단합니다. 유용한 글이면 공유하기 편하도록 공유 기능들을 제공해 주는 것이 좋겠죠?! 아무튼 우리가 이번 시간에 배운 SEO에 대한 개념을 이해한 것만으로도 우리는 충분히 좋은 지식이 쌓였습니다. 다음시간에 뵙겠습니다.