프론트엔드 공부/웹표준 & 웹접근성

SEO(Search Engine Optimization)

SEO(Search Engine Optimization) 란?

SEO는 검색 엔진 최적화(Search Engine Optimization)는 검색 엔진에서 웹 사이트의 노출 순위를 높이기 위한 방법을 의미한다.

검색(Search): 사람들이 질문에 대한 답변이나 필요에 맞는 제품이나 서비스를 찾고 싶을 때 하는 일.
검색 엔진(Search Engine): 사람이 해당 검색을 수행할 수 있는 사이트(예: Google 또는 Bing).
검색 엔진 최적화(Search Engine Optimization): 해당 검색 엔진이 해당 검색을 서비스하는 사이트와 연결하도록 하기 위해 수행하는 작업.

웹 페이지나 어플리케이션을 검색 결과 상위에 노출시키면, 해당 사이트에 대한 노출 기회가 증가하고, 이를 통해 더 많은 유저들의 방문을 유도할 수 있게된다. SEO 전략은 검색 엔진의 알고리즘 변화에 대응하고, 기술적인 방법을 사용하여 검색 엔진에서 웹 사이트를 인식시키는 걸 목적으로 한다.
간단히 정리하면 SEO는 Google에서 더 높은 순위를 매기고 사이트에 더 많은 트래픽을 유도하기 위해 수행하는 작업이다.

구글을 기준으로 잡은건 Google은 많은 검색 엔진 중 하나일 뿐이지만. 시장 점유율의 92%를 차지하는 "Google" 및 "검색 엔진"이라는 용어는 이 게시물의 의도 및 목적과 동의어로 사용함.

검색엔진 최적화 유형

검색 엔진은 콘텐츠 순위를 매길 때 몇 가지 요소를 고려하는데 SEO는 크게 On-Page SEO와 Off-Page SEO로 나눌 수 있다.

On-Page SEO : 웹 사이트 내부에서 수행되는 최적화 작업으로, 해당 사이트의 콘텐츠, 제목 태그, 메타 태그, 이미지 태그 등의 요소를 최적화하여 검색 엔진에서 해당 사이트를 더 잘 인식하도록 하는 작업이다
Off-Page SEO : 웹 사이트 외부에서 수행되는 최적화 작업으로, 다른 웹 사이트에서 해당 사이트로의 링크를 생성하거나 소셜 미디어를 활용하여 인기도와 신뢰성을 향상시키는 작업을 의미한다. Off-Page SEO의 핵심은 백링크(Backlink)다.
이 중에서 웹 페이지를 작성할 때 활용할 수 있는 On-Page SEO에 대해서 알아보자.

On-Page SEO란 웹페이지 내부에서 검색 엔진 최적화를 진행하는 방법 중 하나로, 타이틀 태그와 메타 태그를 활용하는 것이 중요하다.
<title> 타이틀 태그는 웹페이지의 제목을 나타내며, 검색 엔진에서 검색 결과 페이지에서 맨 위에 표시된다. 따라서 웹페이지의 주요 내용을 요약하여 간결하게 작성하는 것이 중요하다. 타이틀 태그는 HTML 코드에서 <title> 태그 안에 작성한다.

<head>
    <title>글쓰기</title>
</head>

<head>
    <title>글쓰기</title>
    //name 속성을 사용하며, SEO를 위해서 사용
    <meta name="속성값" content="내용" />
    // 페이스북(현 Meta)에서 게시물을 공유하기 위한 목적으로 만들었으며, 
    // 각 속성값 앞에는 오픈 그래프를 뜻하는 “og”가 붙는다
    <meta property="og:title" content="미리보기시 나오는 타이틀 내용">    
    <meta property="og:description" content="여기에 작성">
</head>

이 외에도 On-Page SEO에서는 키워드 사용, 컨텐츠 구성, 내부 링크 구성 등 다양한 요소가 있으며, 이를 통해 검색 엔진에서 높은 순위에 노출될 수 있도록 최적화를 진행한다.
SEO를 위한 meta 요소

<meta name="속성값" content="내용" />

name 속성값	설명
description	웹페이지의 간략한 설명을 제공하는 요소로, 검색 엔진 결과 페이지에서 웹페이지의 간단한 소개가 표시됩니다.
keywords	웹페이지와 관련된 키워드를 나열하는 요소입니다. 검색 엔진에서 해당 키워드와 관련된 검색어에 노출될 확률을 높일 수 있습니다.
author	웹페이지의 작성자를 나타내는 요소입니다.
robots	검색 엔진 로봇이 웹페이지를 크롤링할 때 적용할 수 있는 지시사항을 제공하는 요소입니다.
viewport	모바일 기기에서 웹페이지를 볼 때 화면 크기를 조정하는 요소입니다.

오픈그래프(open graph) 페이스북에서 공유할 때 사용되는 메타 태그 요소

<meta property="속성값" content="내용" />

propert 속성값	설명
og:url	페이지의 표준 URL입니다.
og:site_name	사이트의 이름입니다.
og:title	콘텐츠의 제목입니다.
og:description	콘텐츠에 대한 간략할 설명입니다. 검색 결과에서 제목 밑에 뜨는 내용을 생각하시면 됩니다.
og:image	미리보기로 표시될 이미지입니다.
og:type	콘텐츠 미디어의 유형입니다. 기본 값은 website로, video, music 등의 유형을 표시할 수 있습니다.
og:locale	리소스의 언어로, 기본값은 en_US입니다. 한국은 ko_KR입니다.

실습해보기

우선 아무 것도 작성되지 않은 상태에서 링크를 공유하고 미리보기를 확인해보세요.
<head> 요소 안에 <title> 요소를 작성하고 공유하여 미리보기를 확인해보세요.
<head> 요소 안에 속성으로 property=”og:title” 를 갖는 <meta> 요소를 작성하고 content 속성값도 10글자 내외로 짧게 작성해주세요. 그 다음 공유하여 미리보기를 확인해보세요.
<head> 요소 안에 속성으로 property=”og:description” 를 갖는 <meta> 요소를 작성하고 content 속성값도 10글자 내외로 짧게 작성해주세요. 그 다음 공유하여 미리보기를 확인해보세요.
property=”og:description” 를 갖는 <meta> 요소의 content 속성값을 30자 이상으로 길게 작성해보세요. 그 다음 공유하여 미리보기를 확인해보세요.
property=”og:title” 를 갖는 <meta> 요소의 content 속성값을 30자 이상으로 길게 작성해보세요. 그 다음 공유하여 미리보기를 확인해보세요.
<body> 요소 안에 <img> 요소를 만든 다음 src 속성을 작성하여 이미지를 넣어주세요. 그 다음 공유하여 미리보기를 확인해보세요.
<head> 요소 안에 속성으로 property=”og:image” 를 갖는 <meta> 요소를 작성하고 content 속성으로는 <img> 요소와는 다른 주소를 사용해주세요. 그 다음 공유하여 미리보기를 확인해보세요.

읽어보면 좋을거리

On-Page vs. Off-Page SEO: What’s the Difference?

Learn the difference between on-page and off-page SEO so you can build a website that appeals to both users and search engines.

www.woorank.com

저작자표시 비영리 변경금지

'프론트엔드 공부 > 웹표준 & 웹접근성' 카테고리의 다른 글

접근성을 지키며 마크업하기 (0)	2023.03.03
웹 표준 & 접근성 종합퀴즈 (0)	2023.03.03
웹 접근성 (0)	2023.03.02
웹 표준, 시맨틱 태그, 크로스 브라우징 (0)	2023.02.28

Contents

새소식

인기 검색어