TIL 52일차 - [사용자 친화 웹] 웹 표준 & SEO

Yoon Kyung Park·2023년 6월 25일

TIL

목록 보기

52/75

웹 표준의 개념과 등장 배경을 기억한다.

o
브라우저 간 호환이 되지 않아서 웹을 정상적으로 구동하기 어려웠다.
이를 해결하기 위해서는 각 브라우저마다 따로 개발해야 했다.
이러한 불편함을 해결하고자 웹 개발의 형식을 통일시켰다.

이렇게 등장한 웹 표준은
사용자가 어떠한 운영체제나 브라우저를 사용하더라도
웹 페이지가 동일하게 보이고, 정상적으로 작동할 수 있도록
웹에서 표준적으로 사용되는 제작 기법을 의미한다.
최신 웹 브라우저들은 모두 웹 표준을 지원한다.
웹 표준을 지켰을 때의 장점을 이해한다.

o
웹 표준 이전에는 구조, 표현, 동작이 뒤섞인 코드가 많아 무거웠는데,
각 영역이 분리되면서 유지 보수가 쉬어졌고, 코드가 경량화 되면서
트래픽 비용이 감소하는 효과도 발생했다.

또한, 웹 호환성이 확보되었고, 웹 표준에 맞춰 웹 사이트를 작성함으로써
검색 엔진에서 더 높은 우선순위에 노출될 수 있게 되어
홍보 비용을 줄일 수 있게 되었다.

다양한 사용자의 환경과 다양한 사용자에 맞춰서 개발하기란 어렵지만,
웹 표준에 맞춰서 개발하면, 이러한 어려움을 해결할 수 있다.

따라서 웹 표준을 지키면, 유지 보수의 용이성, 웹 호환성 확보,
검색 효율성 증대, 웹 접근성 향상의 장점이 있다.
Semantic HTML을 작성해야 하는 이유를 이해한다.

o
Semantic HTML는 각 요소의 이름만 보고도 화면에서 어떤 역할을 하게 되는지,
어떤 내용을 담게 되는지 보다 더 명확하게 알 수 있으며,
HTML이 구조를 만드는 것을 넘어 의미를 갖게 된 것이다.

이로 인해, 개발자 간의 소통이 원활해지고, 검색 효율성이 증대되었고,
웹 접근성을 향상시킬 수 있게 되었다.

그러나 모든 사이트들이 이 semantic 요소를 지키며 개발되지는 않는다.
예를 들어 네이버는 div와 span으로 이루어져있다.
이렇게 이미 너무 오래 되고, 규모가 커진 경우에는 수정하기에 비용이 너무 많이 들 경우,
id나 class, role 요소를 사용하여 구분하기도 한다.
cf) W3C나 비교적 최근에 개발된 toss는 semantic 요소를 지키며 개발되었다.

또한 모든 요소를 semantic하게 사용할 수는 없다.
모든 요소가 모두 의미를 가질 수는 없기 때문이다.
따라서 의미가 있는 경우에는 될 수 있으면, sematic 요소를 사용하고,
그 외에는 역활에 맞는 HTML 요소를 사용한다.
Semantic HTML을 작성하는 방법을 이해한다.

o
시멘틱 요소의 종류들을 적절하게 사용한다.

*<article> 과 <section>은 서로 상하 관계에 있는 게 아니고 상황에 따라 포함될 수도 있고, 개별적으로 사용될 수도 있다.
자주 틀리는 마크업 규칙과 올바르게 작성하는 방법을 기억한다.
o
- 인라인 요소 안에 블록 요소를 넣기 (x)
  : 콘텐츠가 차지하는 만큼만 영역을 차지하는 인라인 요소가
  가로로 넓게 화면 영역을 차지하는 블록 요소 안에 포함되어야 한다. --> 블록 요소 > 인라인 요소
- <b>요소, <i>요소 사용하기 (x)
  : <b>요소와 <i>요소는 시멘틱 하지 않고 스타일과 관련된 의미이므로,
  글씨에 효과를 줌과 동시에 각 콘테츠를 강조하는 내용상의 의미를 부여하는
  <strong>요소와 <em>요소를 사용한다.
- <hgroup>요소 막 사용하기 (x)
  : <hgroup>요소는 목차의 역할을 하며, 콘텐츠의 상하 관계를 표시하기 위해 사용하므로 글씨 크기를 조절하기 위한 용도로 사용하면 사용자에게 잘못된 화면 구조 정보를 전달하게 된다.
- <br /> 요소 연속으로 사용하기 (x)
  : <br /> 요소는 쭉 이어지는 텍스트 흐름에 줄 바꿈을 해주기 위해서 사용하는 요소이므로 이런 목적 외에 요소 사이에 간격을 주기 위한 용도로 남발해서는 안된다.
  <br /> 요소는 내용상으로 구분이 필요할 경우에는
  엔터처럼 줄바꿈으로만 사용하고,
  텍스트 간에 간격이 필요한 경우에는
  <p>요소를 사용하거나 별도로 CSS 속성을 주어
  여백을 조정해주는 것이 좋다.
- 인라인 스타일링 사용하기 (x)
  : HTML 요소 안에 인라인으로 스타일링 속성을 설정하는 것은
  웹 표준으로 분리한 영역을 다시 합치는 것과 같으므로
  HTML과 CSS 코드를 분리하여 작성한다.
  ex) <h3 style="color:blue">이렇게 인라인 스타일링으로는 사용하지 말 것</h3>

크로스 브라우징의 개념과 방법을 기억한다.

o
웹 사이트에 접근하는 브라우저의 종류에 상관없이 동등한(동일한 x) 화면과 기능을 제공할 수 있도록 만드는 작업을 의미한다.

브라우저마다 사용하는 렌더링 엔진이 다르기 때문에 동일한 화면을 만드는 것은 불가능하다.
따라서 크로스 브라우징의 목표는 모든 브라우저에서 '동등한' 수준의 정보와 기능을 제공하는 것이다.

크로스 브라우징 워크 플로우(방법)
: 초기 기획 --> 개발 --> 테스트/발견 --> 수정/반복
(버그 발견) --> 테스트/발견 --> 수정/반복
SEO의 개념과 필요성을 기억한다.

o
SEO란, Search Engine Optimization의 약자로
검색 엔진 최적화를 의미한다.
SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게 만들 수 있다.
SEO의 종류를 기억하고 구분할 수 있다.

o
SEO에는 크게 On-page SEO와 Off-page SEO로 나뉜다.

On-page SEO는 웹 페이지를 작성할 때, 사용할 수 있는 SEO 방법으로 제목, 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법이다.

Off-page SEO는 웹 사이트의 외부에서 이루어지는 SEO로
소셜 미디어 홍보, 타 사이트에서 연결되는 링크인 백링크,
광고비를 지불하고 검색 결과 상위에 노출시키기 등과 같은 방법으로
웹 페이지 내용이나 구조와는 관련 없다.
SEO에 영향을 주는 요소의 종류와 작성 방법을 기억한다.
o

👇 [<title> 요소]
: 검색 결과창에서 제목에 해당하는 요소로 <head> 요소의 자식 요소로 작성한다.
<title> 요소에 제목이 너무 길거나 짧으면, 유입률이 떨어질 수 있으며, 같은 키워드를 반복하면 스팸으로 처리될 수 있으니 제목에 핵심 키워드는 한 번만 포함시키는 것이 좋다.

👇 [<meta> 요소]
: 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터인 메타 데이터를 담는 요소로 검색 결과창에서 제목 밑에 따라 오는 설명글을 의미한다. 뿐만아니라 소셜 미디어나 채팅 애플리케이션에서 링크를 공유했을 때 뜨는 링크 미리보기와 관련 정보도 이 <meta> 요소에 들어가 있는 내용이다.

<meta> 요소에는 목적에 따라 2가지로 나뉜다.

첫 번째의 경우는 name 속성을 사용하며, SEO를 위해서 사용하는 것이 목적이다.

👇 name 속성을 사용하는 경우

두 번째의 경우는 property 속성을 사용하며,
다른 사람에게 공유하기 위한 목적이다.
특히 property 속성을 사용하는 경우에는 오픈 그래프(Open Graph)라고 하며,
각 속성값 앞에는 오픈 그래프를 의미하는 "og"가 붙는다.

👇 property 속성을 사용하는 경우 (= Open Graph)

👇 [<hgroup> 요소]
: <h1>~<h6> 요소를 의미하며,
콘텐츠의 제목을 표시하는 용도인 만큼 핵심 키워드를 포함하고 있을 가능성이 높고,
검색 엔진도 이 요소의 내용을 중요하게 취급한다.
따라서 콘텐츠를 작성할 때, 핵심 키워드를 의식해서
<hgroup> 요소에 넣어주는 것도 SEO에 도움이 된다.
만약, 똑같은 키워드만 반복해서 넣는 경우 역효과를 불러올 수 있으니
이미 사용한 키워드는 비슷한 키워드로 대체하거나
핵심 키워드의 관련 키워드들을 한번에 쭉 포함시키는 것이 좋다.

👇 [콘텐츠]
- 다른 사람이 사용하지 않은 아이디어가 담긴 개성 있는 브랜딩
- 타 사이트에서 인용한 글을 복사 + 붙여넣기 하지 않고,
  일부만 가져와서 링크를 첨부하여 출처를 표기한 글
- 간결한 제목과 설명글
- 검색 엔진이 읽지 못하는 이미지 대신 글로 쓰거나
  alt 속성을 사용하여 해당 이미지에 대한 짧은 설명을 텍스트로 작성한 글
출처: codestates
SEO에 영향을 주는 요소를 직접 작성할 수 있다.

o

실습

SEO에 영향을 미치는 요소인 <title> 요소와 <meta> 요소 중에서도
오픈 그래프 요소를 작성해 보고, 링크를 공유했을 때 미리보기가 어떻게 뜨는지
직접 확인해 보며 해당 요소들이 어떻게 작동하는지 알아본다.
또한, 오픈 그래프 요소가 미리보기에서 어떤 역할을 하는지,
오픈 그래프 요소가 없을 때에는 어떤 요소가 미리보기에 표시되는지 확인한다.

[주의사항]

공유할 때에는 카카오톡 나와의 채팅을 이용한다.
링크를 공유할 땐 브라우저 링크가 아닌,
코드 우측 화면에 있는 링크를 복사해서 공유한다.
코드를 저장한 다음에 링크를 공유한다.
링크를 공유한 후에는 [카카오 Developers --> 도구 --> 디버거 도구]에서 공유한 링크를 초기화한다.
초기화하지 않고 같은 링크를 다시 공유하는 경우, 요소를 변경해도 미리보기 내용이 변하지 않는다.

[실습 순서]

우선 아무것도 작성되지 않은 상태에서 링크를 공유하고 미리보기를 확인한다.
<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> 요소와는 다른 주소를 사용한다.
그 다음 공유하여 미리보기를 확인한다.