검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화 해주는 작업 SEO(Search Engine Optimization, 검색 엔진 최적화) 가 필요하다.
⇒ SEO를 통해 검색 엔진에서 웹 페이지를 보다 상위에 노출될 수 있게 만들 수 있다.
On-Page SEO
: 페이지 내부에서 진행할 수 있는 SEO,
⇒ 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법
⇒ 여러 개의 <meta>
요소와 <title>
요소에 검색 키워드를 추가, 이는 SEO에 영향을 주는 수 많은 요소 중 일부
Off-Page SEO
: 웹 사이트 외부에서 이루어지는 SEO,
⇒ 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법, 웹 페이지 내용이나 구조와 관계 없음
⇒ 광고비를 지불해 검색 결과 상위에 뜨게 하는 것
<title>
요소<title>
요소는 검색 결과창에서 제목에 해당하는 요소로, <head>
요소의 자식 요소로 작성한다.
보통 검색 후 이 제목만 보고 어떤 페이지에 들어갈지 결정하는 경우가 많은데, 이처럼 제목은 검색 결과에 상당히 중요한 역할을 한다.
<title>
요소에 어떤 내용을 작성하는가에 따라 검색 후 유입까지 유도할 수 있다.<title>
요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아진다.<meta>
요소<meta>
요소는 메타 데이터를 담는 요소, <head>
요소의 자식요소로 작성해주는 것이 일반적
🧐 메타데이터란?
해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터
<meta>
요소에 들어가는 내용SEO를 위한 meta요소 ⇒
name
검색 결과창에서 제목 밑에 따라오는 설명글이<meta>
요소 안에 들어있는 내용.
해당 웹 페이지가 어떤 데이터를 다루고 있는지 설명하는 메타 데이터가 들어있음을 알 수 있다.
⇒name
속성을 사용하며 SEO를 위해 사용하는 것이 목적.<meta name="속성값" content="내용" />
name
속성값
description
: 콘텐츠에 대하 간략한 설명, 검색 결과에서 제목 밑에 뜨는 내용keywords
: 웹 페이지의 관련 키워드들을 나열할 때 사용author
: 콘텐츠의 제작자를 표시
오픈그래프(open graph) ⇒
property
<meta>
요소에 들어가는 내용은 소셜 미디어나 채팅 어플에서 링크를 공유했을 때 뜨는 링크 미리보기와 관련된 정보도 들어있다.
⇒property
속성을 사용하며, 다른 사람에게 공유하기 위한 것이 목적
⇒ 이 속성을 사용하는 건 오픈그래프(Open Graph) 라고 하며, 페이스북에서 게시물을 공유하기위해 만들었으며, 각 속성값 앞에는 오픈 그래프를 뜻하는 "og" 가 붙는다.<meta property="속성값" content="내용" />
property
속성값
og:url
: 페이지의 표준 URLog:site_name
: 사이트의 이름og:title
: 콘텐츠의 제목og:description
: 콘텐츠에 대한 간략한 설명, 검색 결과에서 제목 밑에 뜨는 내용og:image
: 미리보기로 표시될 이미지og:type
: 콘텐츠 미디어의 유형. 기본값은 website로, video, music 등의 유형을 표시할 수 있음og:locale
: 리소스의 언어로 기본값은 en_US이고, 한국은 ko_KR
<hgroup>
요소콘텐츠의 제목을 표시하는 용도인만큼 핵심 키워드를 포함하고 있을 가능성이 높다.
따라서 검색 엔진도 <hgroup>
요소의 내용을 중요하게 취급한다.
⇒ 콘텐츠를 작성할 때 핵심 키워드를 의식해서 <hgroup>
요소에 넣어주는 것도 SEO에 도움이 된다.
⇒ 하지만 똑같은 키워드만 반복해서 넣는 것은 역효과
⇒ 이미 사용한 핵심 키워드를 그대로 사용하지 않고 비슷한 키워드로 대체해서 사용하거나, 관련 키워드들을 포함시키는게 좋다.
아이디어나 이름이 겹치지 않는다면 관련 키워드를 검색햇을 때 해당 웹 사이트가 상위권에 뜰 가능성이 매우 높다. 꼭 이름이나 서비스의 종류가 아니더라도 웹 사이트만의 독특한 이벤트나 콘텐츠를 만들어내는 것도 좋은 방법
타 사이트의 글을 그대로 복사해서 사용하면 검색 엔진은 중복 문서로 판정해 아예 검색 결과에서 생략해버리기도 한다.
타 사이트 글을 인용하고 싶다면 일부만 가져오면서 링크를 첨부해 출처를 표기하는게 좋음
페이지의 제목과 설명글에 이것 저것 많이 적어 넣는다고 검색이 잘되는 것 아님
연관 없는 키워드를 넣어 방문한 사용자는 해당 사이트에 안좋은 이미지를 갖게 될 수 있다.
같은 키워드를 너무 많이 반복해서 작성하면 최악의 경우 스팸 요소가 있는 사이트로 분류될 가능성도 있다.
적절한 이미지의 사용은 콘텐츠의 품질을 높여주지만 글자로 적어도 될 내용을 이미지로 만들어 작성하는 것은 SEO에 도움이 되지 않음
⇒ 이미지로 넣어야 한다면 alt
속성을 사용해 이미지에 대한 설명을 텍스트로 작성하는 것이 좋다.
⇒ 하지만 너무 길게 작성하면 스팸 요소로 인식할 수 있으니 꼭 필요한 설명만 적기
<head>
요소 안에 <title>
요소를 작성하고 공유하여 미리보기를 확인해보기<head>
요소 안에 property=”og:description”
속성을 갖는 <meta>
요소 작성하고, content
속성값을 10글자 내외로 짧게 작성하기property=”og:description”
속성을 갖는 <meta>
요소 작성하고, content
속성값을 30글자 이상 작성하기property=”og:title”
속성을 갖는 <meta>
요소 작성하고, content
속성값을 30글자 이상 작성하기<body>
요소 안에 <img>
요소 만들고, src
속성작성해서 이미지 넣기property=”og:image”
속성을 갖는 <meta>
요소 작성하고, content
속성으로 <img>
와 다른 주소 사용하기