개인프로젝트를 고민하던 중
실 사용자를 받아보는 경험을 할 수 있는 프로젝트를 진행하여 내 경쟁력을 높이고 싶다는 생각이 들었다.
실 사용자를 받으려면 일단 검색 시 무조건 상단에 떠야하는데... 그러기 위해 필요한게 바로SEO 검색 엔진 최적화인 것이다!
✅ SEO (검색 엔진 최적화) 란?
-
SEO(검색 엔진 최적화, Search Engine Optimization): 웹사이트나 웹페이지의 가시성을 향상시키기 위한 일련의 기술과 전략 -
SEO의 주요 목적 : 웹에서 특정 키워드를 검색했을 때, 검색 결과 페이지에서 상위에 노출되도록 하기 위해 SEO 향상이 중요하다!
-> 이를 통해 자연스러운(유료 광고가 아닌) 검색 트래픽을 늘리는 데 큰 도움이 된다.
📖 SEO 향상 방법
✔️ 시맨틱 태그
시맨틱 태그 (Semantic Tags) (by GPT)
- HTML 요소의 한 유형으로, 해당 요소가 포함된 콘텐츠의 의미나 역할을 명시적으로 정의합니다. 이러한 태그들은 웹 페이지의 구조를 더 잘 이해하고 해석할 수 있도록 돕습니다.
- 예를 들어,
<header>,<footer>,<nav>,<article>,<section>,<aside>등이 있습니다.
📖 정리해보자면
-
결국 시맨틱 태그란 html태그 중 일부 태그들을 부르는 말이다.
브라우저가 html 태그들을 보고 '아, 이 사이트는 이렇게 구성된 사이트구나~' 하고 구체적이고 빠르게 사이트 구성을 파악할 수 있도록 만들어주는걸 '시맨틱 태그'라고 칭한다고 이해하면 되겠다. -
시맨틱 태그를 사용하면 검색 엔진이 페이지의 구조를 더 잘 이해할 수 있어서 웹 접근성을 향상시키고, SEO에도 도움이 된다.
📌 시맨틱 태그 각 설명
<header>: 문서나 섹션의 머리말을 나타냅니다. 주로 로고, 제목, 네비게이션 링크 등을 포함합니다.<footer>: 문서나 섹션의 꼬리말을 나타냅니다. 저작권 정보, 연락처, 사이트 링크 등이 포함될 수 있습니다.<nav>: 네비게이션 링크를 그룹화한 영역을 나타냅니다. 주로 사이트 내부 이동을 위한 메뉴나 링크를 담습니다.<article>: 문서나 페이지의 주요 콘텐츠를 나타냅니다. 블로그 글, 뉴스 기사, 포럼 게시물 등이 이에 해당할 수 있습니다.<section>: 문서 내에서 특정 주제나 주제 그룹을 나타냅니다. 일반적으로 제목(<h1>~<h6>)과 함께 사용됩니다.<aside>: 본문과는 관련이 적지만 부가적인 콘텐츠를 나타냅니다. 사이드바, 광고, 측면 정보 등이 포함될 수 있습니다.
✔️ 메타 태그
메타 태그 (Meta Tags) (by GPT)
- 메타 태그는 웹 페이지의 메타데이터를 정의합니다.
이는페이지의 제목, 설명, 키워드, 작성자 등과 같은 정보를 포함할 수 있습니다. 이러한 정보는 주로 검색 엔진 최적화(SEO)나 페이지의 다른 속성을 정의하는 데 사용됩니다.
- 메타 태그는 사용자에게 직접적인 시각적 콘텐츠를 제공하지 않으며, 대신 웹 페이지의 다른 부분을 설명하고 해석하는 데 사용됩니다.
📖 정리해보자면
- Next.js 프로젝트 할 때 metadata 부분에 사이트의 정보들 (렌더링되진 않는, 그래서 유저들이 보는 영역은 아님) 을 기입하는 부분이 있었는데, 딱히 신경써본 적이 없는 영역이었다.
- 이 metadata를 작성하는 것으로도 SEO가 향상될 수 있다는 사실을 처음 알게 되었다.
📌 Next.js 프로젝트에서 metadata 작성하는 법
1. Head 컴포넌트 사용
- Next.js의 next/head 모듈을 사용하여 페이지의
<head>섹션에 메타태그를 동적으로 추가하기
import Head from 'next/head';
function MyPage() {
return (
<div>
<Head>
<title>내 페이지 타이틀</title>
<meta name="description" content="내 페이지 설명" />
<meta name="keywords" content="키워드1, 키워드2" />
</Head>
<div>내 페이지 콘텐츠</div>
</div>
);
}
export default MyPage;
2. next-seo 패키지 사용
- Next.js 애플리케이션에서 SEO를 관리하는 것을 돕는 패키지인 next-seo를 사용하기
import { NextSeo } from 'next-seo';
function MyPage() {
return (
<div>
<NextSeo
title="내 페이지 타이틀"
description="내 페이지 설명"
openGraph={{
title: '내 페이지 타이틀',
description: '내 페이지 설명',
}}
/>
<div>내 페이지 콘텐츠</div>
</div>
);
}
export default MyPage;
✔️ SEO 향상을 위한 기타 방법
- 메인이 되는 방법인 시맨틱 태그, 메타 태그 이외의 방법들은 없는지 gpt에게 물어본 결과 얻은 정보이다.
이걸 전부 다 신경쓰기는 어렵겠지만, 이 내용들을 최대한 신경쓰면 SEO 향상에 도움이 될 것임은 확실하다.
-
고품질의 콘텐츠 제공: 검색 엔진은 사용자에게 가치 있는 정보를 제공하는 웹 페이지를 선호합니다. 따라서 고품질의 콘텐츠를 제공하고 주제에 대한 전문성을 보여주는 것이 중요합니다. 키워드를 적절히 사용하고 유용한 정보를 제공하여 사용자의 요구에 부응하는 콘텐츠를 작성하세요.
-
키워드 연구: 사용자가 검색할 가능성이 높은 키워드를 조사하고 해당 키워드를 포함한 콘텐츠를 작성하세요. 이는 검색 엔진에서 웹 페이지를 노출시키는 데 도움이 됩니다.
-
링크 구축: 다른 웹 사이트에서 당신의 웹 사이트로의 링크를 얻는 것은 검색 엔진에서 웹 페이지의 신뢰도와 중요성을 평가하는 데 중요합니다. 품질 높은 사이트로부터 링크를 얻는 것이 이상적입니다.
페이지 URL에는 해당 페이지의 내용을 잘 반영하는 구조를 사용하고, 키워드를 포함시킵니다. -
페이지 속도 최적화: 웹 페이지의 로딩 속도가 빠르면 사용자 경험을 향상시키고 검색 엔진의 순위를 높일 수 있습니다. 이미지 최적화, 캐시 활용, 코드 최적화 등의 방법을 사용하여 페이지 로딩 시간을 최소화하세요.
-
모바일 최적화: 모바일 친화적인 웹 페이지를 제공하여 모바일 검색에서의 순위를 향상시키세요. 모바일 우선 인덱싱이 적용되는 지금은 더욱 중요한 요소입니다.
-
사용자 경험 개선: 사용자가 웹 페이지에서 쉽게 탐색하고 정보를 찾을 수 있도록 사용자 경험을 개선하세요. 이는 검색 엔진의 평가에도 영향을 미치며, 웹 페이지에 더 많은 트래픽을 유도할 수 있습니다.
-
이미지 태그 최적화:
<img>태그의 alt 속성을 사용하여 이미지에 대한 설명을 제공합니다. 이미지 파일명에도 키워드를 포함하는 것이 좋습니다.
