SEO

mochang2·2023년 12월 10일

FE

목록 보기

12/18

0. 공부하게 된 계기

HTML5에 대해 잘 안다고 하니, '그러면 HTML5에서 SEO를 하는 방법을 알고 있느냐?' 라는 질문을 받았다.
벙쪘다. 그런 것도 모르면서 안다고 나불댔던 내가 부끄러웠고 이참에 해당 방법들에 대해 정리하고자 한다.

아쉽게도 검색엔진과 관련된 부분이고 현재 운영중인 사이트가 없어서 테스트는 못 하고 관련 내용 정리만 한다.
검색 엔진에게 웹 사이트를 소개하기(?) 적합한 방식들을 정리했다.

1. title

너무 간단해서 후딱 넘어갈 내용이다.

<!DOCTYPE html5>
<html>
  <head>
    <title>메타 태그를 통한 검색엔진 최적화</title>
  </head>
  <body></body>
</html>

위와 같이 사용되며 해당 웹 페이지의 제목이다.

2. meta

<meta>는 컨텐츠가 아닌 웹 페이지의 정보를 명시하기 위한 태그이다.
나는 보통 <head> 태그 내에 viewport 옵션을 주는데 많이 사용했었는데 외에도 많은 방식이 있다.
특히 페이지 요약문 지정, 사용하고 있는 문자 세트 지정, 검색 엔진 로봇의 동작 지정 등이 가능하다.

SEO를 위한 <meta> 태그는 다음과 같은 형식을 지닌다.
<meta name="name" content="content" />

meta robots

<meta name="robots" content="noindex,nofollow" />

검색 엔진에 웹 페이지를 탐색해야 하는지 여부와 방법을 알려주는 태그이다.
다음과 같은 옵션이 있다.

index: 크롤러에게 웹 페이지를 읽어가서 색인하도록 허락하는 값
noindex: 크롤러에게 웹 페이지를 읽어가지 않도록하는 값
follow: 크롤러에게 페이지 내의 링크로 연결된 웹 페이지로 이동하는 것을 허락하는 값
nofollow: 크롤러에게 페이지 내의 링크로 연결된 웹 페이지로 이동을 허락하지 않는 값

검색 엔진 로봇은 meta요소로 지정하지 않은 경우에도 자동적으로 페이지를 순회하기 때문에 index와 follow는 따로 설정하지 않아도 된다.
noindex는 페이지의 수정이나 제작을 URL을 라이브 상태에서 진행을 해야하는 경우나 한시적으로 특정 고객에게만 오픈 하는 내용으로 굳이 검색 결과에 나타나지 않아도 좋은 웹 페이지의 경우에 활용할 수 있다.
또한 nofollow의 경우는 검색엔진의 크롤러가 웹 페이지에 있는 외부 사이트로의 링크를 따라 밖으로 나가지 않도록 하기 위함인데, 방문자들이 입력할 수 있는 comment 등에 적용되는 경우가 많다.

meta description

<meta name="description" content="원하는 내용">

검색 키워드를 여러 번 반복해서 넣어 순위를 올려보고자 하더라도 검색 순위가 올라가지는 않는다.
하지만 클릭율에는 영향을 미치므로 중요한 태그이다.

각 페이지 마다 고유한 메타 설명문 작성
페이지의 타겟 키워드를 1회 포함하여 메타 설명 작성
문장 형식으로 작성
일반적인 설명 대신, 클릭가치가 있는 내용으로 작성
유저들의 검색의도에 적절하게 작성
영어나 기호를 기준으로 약 135~160자, 한글이라면 80~110자 정도가 적당

meta title

<meta name="title" content="페이지 타이틀" />

<title> 태그와 하는 일이 같기 때문에 SEO 측면에서는 큰 의미가 없다고 한다.
다만 <title>과 <meta name="title">의 값이 다를 경우 검색 엔진은 <title>을 우선적으로 보여준다.

각 페이지 마다 고유한 메타 타이틀 태그를 작성
페이지의 타겟 키워드를 1회 포함하여 타이틀 작성
간략하지만 설득적으로 (클릭가치가 있는 제목)
타겟 키워드의 의도와 일치하게 작성
60자 이내로 작성

meta viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

뷰포트의 너비를 장치의 너비로 설정(width=device-width)하고 사용자가 페이지를 방문할 때 초기 줌 레벨을 설정(initial-scale=1)한다는 의미이다.
이 태그가 있다는 것은 이 페이지가 모바일 친화적이라는 것을 검색엔진에 나타낸다.

meta keywords

<meta name="keywords" content="키워드1,키워드2, … ,키워드10" />

한 때 SEO에 중요한 역할을 했으나 해당 태그를 악용하는 경우가 많아서 현재는 의미가 없는 메타 태그라고 한다.
~그냥 이런 게 있다라고 알고만 있자.~

3. sematic web

sematic web이란 웹을 개발할 때 개발자가 의도한 요소의 의미가 명확히 드러나게 작성하는 방법이다.
이 방법은 SEO뿐만 아니라 코드의 가독성을 높이며 유지보수를 쉽게 할 수 있도록 도와준다.
~근데 styled-component처럼 CSS in JS 방식에게는 그닥...?~

아래 사진은 semantic tag와 non-semantic tag를 한 번에 비교한 내용이다.

semantic vs non-semantic

non-semantic tag

대표적인 예시가 <div>나 <span>, <section>이 있다.

cf) section vs article
section을 버리고 article을 사용해야 하는 이유까지 봤지만 <section>과 <article>의 용도 차이를 잘 모르겠다.
다만 한 가지 확실한 것은 <section>은 목차를 위해 사용되며 목차 인식 기능을 구현해놓은 웹 브라우저가 없다는 것이다.

semantic tags

HTML5에 새롭게 등장한 elements들은 semantic web을 만드는데 도움이 되는 태그들이다.
https://pozafly.github.io/html/semantic-web/ 와 https://geonlee.tistory.com/96 를 참고했다.
참고로 다음에 나올 태그들은 전부 inline이 아닌 block-level element이다.

article

element가 독립된 내용임을 알려준다.
보통 포럼 글, 블로그 포스트, 신문 기사 등을 의미하는 데 뿐만 아니라 컨텐츠를 묶어 하나의 영역으로 표시하도록 사용될 수도 있다.

<article>
  <h1>What Does WWF Do?</h1>
  <p>
    WWF's mission is to stop the degradation of our planet's natural
    environment, and build a future in which humans live in harmony with nature.
  </p>
</article>

문서나 섹션의 머릿말을 의미한다.
<body>안에서 사용될 경우 웹 페이지 도입부에서 웹 사이트 로고와 네비게이션 링크를 감싸는 것에 사용된다.
<article> 또는 <section> 안에서 사용될 경우 해당 영역에 대한 특정 헤더를 정의하기 위해 사용된다.

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>
    WWF's mission is to stop the degradation of our planet's natural
    environment, and build a future in which humans live in harmony with nature.
  </p>
</article>

main

웹 사이트의 본문을 뜻한다.
메인 컨텐츠를 크게 감싸주는 역할로, 한 HTML 내에서 1개만 존재해야 한다.

문서나 섹션의 꼬릿말을 의미한다.
보통 웹 페이지의 가장 하단에서 회사 정보나 약관 정보, 사이트 맵, 소셜 미디어 링크 등의 컨텐츠를 표시하는 것에 사용된다.
<header>처럼 문서에서 여러 개 존재할 수 있다.

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>
    Contact information:
    <a href="mailto:someone@example.com"> someone@example.com</a>.
  </p>
</footer>

nav

네비게이션 링크의 집합이다.
웹 사이트의 동선을 생성해줌으로써 상위 페이지에서 하위 페이지로 유도하는 역할을 한다.

<header> 하위에 말고 동등한 위치에 두는 것이 SEO 측면으로 더 좋다.
하나의 문서에서 여러 개의 <nav> 를 가질 수 있다.
모든 링크가 <nav> 안에 있어야 하는 것은 아니다.
내용을 쉽게 이해할 수 있도록 <nav> 내부에는 <ul>을 사용하는 것이 좋다.
사이트 하단에 위치한 링크는 <footer> 로 충분하다.

<nav>
  <ul>
    <a href="/html/">HTML</a>
  </ul>
  <ul>
    <a href="/css/">CSS</a>
  </ul>
  <ul>
    <a href="/js/">JavaScript</a>
  </ul>
  <ul>
    <a href="/jquery/">jQuery</a>
  </ul>
</nav>

aside

사이드 메뉴 등 문서의 주요 내용과 간접적으로만 연관된 부분을 나타낸다.
용어집 항목, 저자 약력, 관련 링크 등 부가 정보나 해설을 담고 있기도 하다.
반드시 <main>이나 <article>과 독립적이어야 하는 것은 아니고 해당 태그의 내부에서 사용될 수도 있다.

<article>
  <p>디즈니 만화영화 <em>인어 공주</em>는 1989년 처음 개봉했습니다.</p>
  <aside>인어 공주는 첫 개봉 당시 8700만불의 흥행을 기록했습니다.</aside>
  <p>영화에 대한 정보...</p>
</article>

figure, figcaption

<figure>는 일러스트, 도형, 사진, 코드같은 그 자체로 의미를 갖는 내용을 의미한다.
<figcaption>은 <figure>의 설명을 하고 이미지에 시각적 설명을 추가하는 등의 목적을 가지고 사용된다.

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" />
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

image

<img>는 alt라는 속성이 있기 때문에 semantic tag이다.
따라서 이미지가 메인 컨텐츠라면 <img> 태그를 사용하는 것이 SEO를 할 수 있다.

배경에 이미지를 넣을 수 있는 방법은 <img>태그를 이용하는 것뿐만 아니라 css의 background-image 속성을 사용할 수도 있다.
이러한 방법으로 그림을 넣는다면 SEO가 아닌, 컨텐츠 외적인 웹 페이지의 디자인적 요소를 표현할 때 사용한다.
특히 <img> 태그보다 크기가 작기 때문에 렌더링 최적화 시 도움이 된다고 한다.

'semantic web'이라고 검색했을 때는 나오지 않았지만 'a11y'라고 검색했을 때 나온 아래 방법도 semantice web을 만드는 방법이라 생각해 추가했다.

<div>를 버튼으로 사용하지 않는다(div는 포커스를 맞출 수 없으며 키 이벤트가 활성화되지 않기 때문).
<a>를 버튼으로 사용하지 않는다.
<a> 태그에 유효한 href를 넣는다.
<button>을 링크로 사용하지 않는다.

4. Open Graph

웹페이지의 링크가 SNS에서 공유될 때 어떻게 노출될지를 정의해주는 역할을 한다.
SNS에 효과적으로 공유될 수 있게 하는 목적뿐만 아니라, SEO에도 도움이 된다.

og:title: 웹페이지 제목
og:description: 웹페이지 상세 설명
og:image: 썸네일(권장 사이즈는 1200 x 630)
og:type: 웹페이지 유형
og:url: 웹페이지 주소

다음과 같은 형식으로 이용된다.
<meta content="~~~" property="og:title"> 또는 <meta content="~~~" property="og:description">

참고

https://webactually.com/2020/03/03/%3Csection%3E%EC%9D%84-%EB%B2%84%EB%A6%AC%EA%B3%A0-HTML5-%3Carticle%3E%EC%9D%84-%EC%8D%A8%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0/
https://yozm.wishket.com/magazine/detail/1540/

mochang2

개인 깃헙 repo(https://github.com/mochang2/development-diary)에서 이전함.

SEO

FE