[21] SEO가 뭔가요? SEO최적화를 위해 어떤 방법을 사용했나요?

📎 질문

SEO가 뭔가요? SEO최적화를 위해 어떤 방법을 사용했나요?

✏ 구술 답변 키워드

검색 엔진 최적화의 목적 : 상위 노출, 트래픽 증가
검색 엔진 알고리즘 : 크롤링, 인덱싱, 랭킹
검색 엔진 최적화 방법 :
- HTML 구조 최적화
- 메타 태그 최적화
- 페이지 로딩 속도 최적화
- 반응형 웹 디자인 (모바일 우선 색인화)
- Sitemap 제공
- robot.txt 제공
- 중복 페이지에 대한 대표 페이지 설정
- 웹 접근성 향상
  ✏ 서술 답변
  
  SEO란
Search Engine Optimization의 약자
검색 엔진 상위 노출을 통해 트래픽을 증가시키는 마케팅 기법

검색 엔진 알고리즘

크롤링 (Crawling) : 웹 크롤러가 웹페이지의 콘텐츠를 복사해서 모든 정보를 수집하고 수집한 정보를 검색엔진으로 가져옵니다
인덱싱 (Indexing) : 수집한 정보를 주제별로 색인해서 데이터를 보관합니다.
랭킹 (Ranking) : 색인된 콘텐츠를 검색 의도에 맞춰서 순위를 부여한 다음 사용자가 해당 키워드로 검색했을 때 랭킹 순서대로 결과를 제공합니다.

SEO 방법

1. HTML 구조 최적화

시맨틱 태그 사용: <header>, <nav>, <article>, <section>, <footer> 등 시맨틱 태그를 사용하여 문서 구조를 명확히 합니다. 이는 검색 엔진이 콘텐츠의 의미와 구조를 이해하는 데 도움을 줍니다.
헤딩 태그 사용: <h1>, <h2>, <h3> 등의 헤딩 태그를 사용하여 콘텐츠의 계층 구조를 만듭니다. 중요한 키워드를 포함한 적절한 헤딩 태그를 사용합니다.

2. 메타 태그 최적화

메타 제목(title tag): 페이지의 주제를 설명하는 타이틀을 포함하며, 주요 키워드를 포함합니다. 길이는 50-60자 내외로 유지합니다.
메타 설명(meta description): 페이지 내용을 요약한 설명을 작성하고 주요 키워드를 포함합니다. 길이는 150-160자 내외로 유지합니다.
```
export const metadata: Metadata = {
title: "마이펫로그",
description: "반려동물의 일상을 기록하고 공유하세요"
};
```

3. 페이지 로딩 속도 최적화

페이지 로딩 시간이 너무 오래 걸리면 이탈률이 높아지고 SEO 순위가 나빠질 수 있습니다.
이미지 최적화, 코드 압축, 캐싱 등의 방법을 활용하여 개선합니다.

4. 반응형 웹 디자인

다양한 디바이스에서 일관적으로 좋은 UX를 제공하는 것이 중요합니다.
특히, 전 세계 트래픽의 55% 이상이 모바일 장치에서 발생하기 때문에 모바일 우선 색인화를 하는 것이 좋습니다. 이는 사이트 콘텐츠의 모바일 버전을 기준으로 웹사이트 순위를 매기는 Google의 방법입니다.

5. Sitemap 제공

사이트에 있는 페이지, 동영상 및 기타 파일과 각 관계에 관한 정보를 제공하는 파일입니다.
가령 모든 페이지가 링크로 연결되어 있지 않아도 크롤러가 웹 페이지의 어떤 구조로 이루어져있는지 파악할 수 있게 합니다.

6. robots.txt 제공

웹 사이트 내부의 특정 페이지가 검색엔진에 노출되지 않았으면 할 때 robots.txt를 사용합니다.
사이트를 분석하는데 불필요한 정보를 차단함으로서 보다 효율적이고 정확한 색인을 돕습니다.

7. 중복 페이지에 대한 대표 페이지 설정

중복 페이지가 존재하는 경우, 그 중 대표 페이지를 canonical로 설정해야 합니다.

8. 웹 접근성 향상

검색 엔진이 이미지를 올바르게 색인화도록 풍부한 콘텍스트를 제공하여 SEO 순위를 향상시킬 수 있습니다.

ALT 속성으로 이미지를 알맞게 설명합니다.

<img src="이미지.jpg" alt="어떤 이미지인지 설명">

aria-label 속성으로 요소의 의미를 설명합니다.

<a href="/search" aria-label="검색 페이지로 이동">
</a>

SEO(검색 엔진 최적화)란?

웹사이트가 유기적인 검색 방식을 통해 검색 엔진에서 상위에 노출될 수 있도록 최적화하는 과정

진행 방식

웹 크롤러: 검색 엔진은 웹페이지가 어떤 콘텐츠를 가지고 있는지, 해당 페이지가 무엇에 대한 것인지 판단하기 위해 인터넷을 통해 웹페이지를 크롤링하는 로봇
코드 스캔하여 웹페이지에 표시되는 텍스트, 이미지, 동영상을 수집하여 가능한 모든 정보를 얻는다.

검색엔진 최적화(SEO)란?

SEO(검색 엔진 최적화)는 웹사이트가 유기적인(무료) 검색 방식을 통해 검색 엔진에서 상위에 노출될 수 있도록 최적화하는 과정을 말합니다. 비즈니스 유형이 어떤 것이든 SEO는 가장 중요한 마케팅 유형 중 하나입니다.

왜냐하면 Google은 검색하는 사람들에게 긍정적인 사용자 경험을 선사하는 것이 목표이기 때문에 가능한 한 최고의 정보를 제공하길 원합니다. 따라서, SEO 노력은 검색 엔진이 여러분의 콘텐츠를 특정 검색어에 대한 웹 상의 주요한 정보로 인식하도록 하는 과정에 포커스를 맞추어야 합니다.

SEO는 어떻게 이루어지나요?

검색 엔진은 웹페이지가 어떤 콘텐츠를 가지고 있는지, 해당 페이지가 무엇에 대한 것인지 판단하기 위해 인터넷을 통하여 웹페이지를 크롤링하는 로봇인 웹 크롤러를 사용합니다. 웹 크롤러는 코드를 스캔하여 웹페이지에 표시되는 텍스트, 이미지, 동영상을 등을 수집하여 가능한 모든 정보를 얻습니다. 웹 크롤러가 각 페이지에서 사용할 수 있는 정보 유형에 대한 충분한 정보를 수집하여 해당 내용이 검색자에게 유용하다고 판단하면 해당 페이지를 색인에 추가합니다. 여기서 말하는 색인은 본질적으로 검색 엔진이 잠재적인 검색자에게 제공하기 위해 저장한 모든 가능성 있는 웹 결과입니다.

SEO란?

SEO는 검색 엔진 최적화(Search Engine Optimization)의 약자로, 웹사이트를 최적화하여 검색 엔진 결과 페이지에서 상위 순위를 차지할 수 있도록 하는 마케팅 기법입니다. 다양한 전략과 도구를 사용하여 검색 엔진이 이해하고 사용자에게 표시할 수 있는 방식으로 웹사이트를 구성할 수 있습니다.

SEO는 오로지 자연 순위에만 초점을 맞춘다는 점을 기억하는 것이 중요합니다. SEO로 더 높은 순위를 차지하기 위해 돈을 지불할 수는 없습니다. SEO에서 더 높은 순위를 차지하는 유일한 방법은 검색 엔진의 요구 사항을 충족하는 것입니다.

웹사이트 최적화를 위한 작업

웹사이트 최적화의 대부분은 온페이지 SEO와 관련이 있습니다. 온페이지 SEO의 가장 큰 기능은 콘텐츠이지만 다음과 같은 기술적 측면도 있습니다

▪️ 최적화된 URL

좋은 URL을 만들기 위한 네 가지 규칙

짧고 단순하게 유지
소문자, 숫자, 하이픈만 사용
URL에는 페이지 콘텐츠의 키워드 포함
연도 포함X

▪️ title 과 메타 태그

title과 메타 태그는 가장 중요한 페이지 내 SEO 요소 중 두 가지입니다. title은 브라우저 탭 상단에 표시되는 텍스트이며, 메타 태그는 검색 엔진 결과 페이지(SERP)에 표시되는 텍스트입니다.

import { Metadata } from "next";

export const metadata: Metadata = {
  title: "홈 | 마이펫로그",
  description: "반려동물 프로필과 건강 수첩을 빠르게 확인하세요",
};

export default function HomeLayout({ children }: { children: React.ReactNode }) {
  return <>{children}</>;
}

▪️ Headings

제목은 작성된 콘텐츠를 구성하고 독자가 쉽게 탐색할 수 있도록 하는 데 중요합니다. 제목은 콘텐츠를 논리적인 섹션으로 구분하는 데 사용해야 하며, 제목 자체는 명확하고 간결해야 합니다.

H1/H2/H3/H4 태그의 적절한 사용

675px-H1-H6-headings

▪️ 이미지 최적화

검색 엔진 크롤러는 사람처럼 이미지를 '읽지' 못합니다. 따라서 크롤러가 이미지를 해석할 수 있도록 도와주어야 합니다. 대체 텍스트에 콘텐츠의 키워드를 사용하여 이미지를 설명합니다. title과 메타 태그에서 동일한 키워드를 사용하면 됩니다.

또한 이미지 파일 크기는 가능한 한 작게 유지하세요. jpg, png 또는 gif 형식만 포함하세요. JPG가 가장 작은 경향이 있으므로 로딩 시간에 도움이 됩니다.

▪️ 반응형 디자인

대부분의 웹 트래픽은 모바일 검색에서 발생하므로 웹사이트가 모바일 사용에 최적화되어 있는지 확인해야 합니다. 실제로 Google은 모바일 친화적이지 않고 색인화되지 않은 웹사이트의 순위를 모바일 우선으로 매기지 않습니다.

웹사이트가 모든 화면 크기와 빠른 로딩 시간에 대해 우수한 사용자 경험을 제공하는지 확인하세요.

▪️ 로딩 시간

페이지 로딩 시간이 너무 오래 걸리면 이탈률이 높아지고 방문자가 이탈하게 됩니다. 또한 Google에서 이를 고려하므로 페이지의 SEO 순위가 나빠질 수도 있습니다. ⇒ React 18버전부터 도입된 RSC(React Server Component)를 활용하여 CSR과 SSR의 혼용

▪️ 사이트맵

색인 생성에 중요합니다. Google을 통해 수동으로 할 수도 있지만, 대부분의 블로그 플랫폼(예: 워드프레스 또는 HubSpot)은 자동으로 생성합니다. 사이트맵 URL을 최신 상태로 유지하기 위해 Google Search Console에 알려야 합니다.

프로젝트 코드

//app/sitemap.ts

import { MetadataRoute } from "next";
import { BASE_URL } from "./_constants/index";

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: `${BASE_URL}`,
      lastModified: new Date(),
      changeFrequency: "yearly",
      priority: 1,
    },
}

SEO란?

SEO(Search Engine Optimization, 검색 엔진 최적화)는 웹사이트나 웹 페이지가 검색 엔진 결과 페이지에서 더 높은 순위에 오를 수 있도록 개선하는 과정입니다. SEO의 궁극적인 목표는 웹사이트로의 유기적 트래픽을 증가시키는 것입니다. 검색 엔진은 사용자가 입력한 키워드와 관련성이 높은 결과를 보여주기 위해 알고리즘을 사용합니다. SEO는 이러한 알고리즘의 작동 방식을 이해하고, 웹사이트를 이에 맞게 최적화하는 작업입니다.

SEO 방법?

HTML 구조 최적화 시맨틱 태그 사용: <header>, <nav>, <article>, <section>, <footer> 등 시맨틱 태그를 사용하여 문서 구조를 명확히 합니다. 이는 검색 엔진이 콘텐츠의 의미와 구조를 이해하는 데 도움을 줍니다. 헤딩 태그 사용: <h1>, <h2>, <h3> 등의 헤딩 태그를 사용하여 콘텐츠의 계층 구조를 만듭니다. 중요한 키워드를 포함한 적절한 헤딩 태그를 사용합니다.
메타 태그 최적화 메타 제목(title tag): 페이지의 주제를 설명하는 타이틀을 포함하며, 주요 키워드를 포함합니다. 길이는 50-60자 내외로 유지합니다. 메타 설명(meta description): 페이지 내용을 요약한 설명을 작성하고 주요 키워드를 포함합니다. 길이는 150-160자 내외로 유지합니다.
모바일 최적화 반응형 웹 디자인: CSS 미디어 쿼리를 사용하여 다양한 화면 크기에 맞춰 레이아웃이 조정되도록 합니다. 모바일 페이지 속도 최적화: 이미지 최적화, 코드 압축, 캐싱 등을 통해 모바일 페이지의 로딩 속도를 최적화합니다.
페이지 속도 개선 이미지 최적화: 이미지 크기를 줄이고, 적절한 형식을 사용합니다. 필요하다면 웹용 이미지 포맷(WebP) 등을 활용합니다. 코드 압축: HTML, CSS, JavaScript 파일을 압축하여 전송 크기를 줄입니다. 캐싱: 브라우저 캐싱을 설정하여 반복 방문 시 로딩 속도를 개선합니다.
JavaScript 최적화 렌더링 방해 최소화: 중요한 콘텐츠가 빠르게 로드되도록 JavaScript를 비동기적으로 로드합니다. async 또는 defer 속성을 사용합니다. SSR(Server-Side Rendering) 또는 하이브리드 렌더링: 초기 로딩 시간을 단축하고 검색 엔진 크롤러가 콘텐츠를 쉽게 접근할 수 있도록 SSR을 사용합니다. Next.js와 같은 프레임워크를 활용할 수 있습니다.
내비게이션 최적화 간단하고 명확한 네비게이션: 사용자가 쉽게 탐색할 수 있도록 메뉴 구조를 단순하게 만듭니다. 검색 엔진도 이러한 구조를 더 잘 크롤링할 수 있습니다. Sitemap 작성: XML 사이트맵을 작성하여 검색 엔진에 제출합니다.
내부 링크 최적화 적절한 앵커 텍스트 사용: 내부 링크의 앵커 텍스트에 주요 키워드를 포함합니다. 페이지 간 연결: 관련 페이지 간의 내부 링크를 통해 사용자와 검색 엔진이 더 많은 콘텐츠를 탐색할 수 있도록 합니다.
구조화된 데이터 사용 Schema.org 마크업: 구조화된 데이터를 추가하여 검색 엔진이 페이지 내용을 더 잘 이해하도록 돕습니다. 이는 리치 스니펫으로 검색 결과에 표시될 수 있습니다.
URL 구조 최적화 간결하고 의미 있는 URL: URL은 간결하고 페이지 내용을 설명할 수 있어야 합니다. 주요 키워드를 포함하고 하이픈(-)으로 단어를 구분합니다. 예: https://example.com/seo-tips-for-frontend
콘텐츠 접근성 향상 ALT 속성 사용: 이미지에 대체 텍스트를 제공하여 이미지가 로드되지 않거나 시각 장애 사용자가 내용을 이해할 수 있도록 합니다. ARIA 레이블: 웹 접근성을 위해 ARIA 레이블을 사용하여 스크린 리더가 콘텐츠를 더 잘 이해하도록 합니다.

SEO는 ‘Search Engine Optimization’의 약자로 구글과 같은 검색엔진에 친화적인 사이트를 구축하는 작업을 말합니다.

검색엔진 알고리즘

크롤링(Crawling) : 웹 크롤러가 웹페이지의 콘텐츠를 복사해서 모든 정보를 수집하고 수집한 정보를 검색엔진으로 가져옵니다
인덱싱 (Indexing) : 수집한 정보를 주제별로 색인해서 데이터를 보관합니다.
랭킹 (Ranking) : 색인된 콘텐츠를 검색 의도에 맞춰서 순위를 부여한 다음 사용자가 해당 키워드로 검색했을 때 랭킹 순서대로 결과를 제공합니다.

SEO 방법

문법에 맞는 html태그 사용 : <title> <strong> 등 검색엔진이 이해하기 쉬운 웹 문서 만들기
시맨틱 태그 사용 : <header> <footer> <section> 등 구조화하기
메타 태그 활용하기
이미지에 alt 속성 부여하기 : 검색엔진은 이미지를 발견하면 alt 속성 안의 텍스트를 통해 인덱싱 작업을 합니다.

Q. SEO가 뭔가요?

SEO란 검색엔진 최적화(Search Engine Optimization) 검색 엔진에서 웹사이트가 상위에 노출될 수 있도록 검색엔진이 쉽게 이해할 수 있는 형태로 웹페이지를 구성하고 정보를 제공하는 최적화 과정. (광고 없이 오가닉 트래픽을 증가시키기 위한 최적화이다)

검색 엔진 알고리즘은 다음과 같다.

웹 크롤러가 웹페이지의 콘텐츠의 정보를 수집하고 검색엔진으로 가져온다
인덱싱 작업으로 주제별로 인덱싱하여 데이터를 보관하고 있는다.
해당 키워드가 검색 되었을때 검색 의도에 맞춰 순위를 부여하고 랭킹 순서대로 결과를 제공한다.

검색 엔진 최적화의 종류는 다음과 같다.

On-Page SEO : 양질의 컨텐츠 주기적 발행 + 검색엔진에 콘텐츠를 잘 전달하기(테크니컬 SEO)
On-SERP SEO : 추가적인 구조화된 데이터 삽입을 통해 검색 결과 페이지에서 다른 검색결과에 비해 더 많은 클릭 경쟁력을 갖는것
Off-Page SEO : 최대한 많은 양질의 백링크를 얻어 유입경로를 많게 하는것.

검색 엔진 최적화의 방식(on-page 중 테크니컬 SEO)에는

HTTPS 적용하기
메타태그 적용하기
이미지 alt태그
SSR 이용
페이지 로딩 속도 개선 및 이미지 최적화
모바일 반응형 및 모바일 친화성 개선 이런 방법들이 있다.

Q. SEO최적화를 위해 어떤 방법을 사용했나요?

서비스 유입을 위해 서비스에 대한 정보를 담고있는 인트로 페이지를 SSR로 구현하여 웹크롤러로 하여금 서비스 설명에 포함된 키워드를 이용하여 인덱싱 및 랭킹할 수 있도록 하였다. 또한 메타태그를 추가하여 라이트하우스 SEO 점수를 개선하였다.

QueenCards / ProjectAnalysis