<div id="readability-page-1" class="page"><div><p>HTML을 의미에 맞춰서 잘 작성하면 검색 엔진에 더 잘 노출될 수 있도록 만들 수 있다.</p>
<h2 id="seo에-영향을-주는-요인들">SEO에 영향을 주는 요인들</h2>
<ul>
<li>검색 결과 페이지 노출 대비 클릭률</li>
<li>페이지 타이틀</li>
<li>메타 디스크립션</li>
<li>로딩 속도</li>
<li>콘텐츠의 양, 질, 개연성</li>
<li>백링크: 다른 웹 페이지로부터 인용(링크)되는 횟수</li>
<li>사용자 경험<br>
- CLS<br>
- LCP</li>
</ul>
<hr>
<h2 id="페이지-타이틀">페이지 타이틀</h2>
<p><img src="https://media.vlpt.us/images/ginameee/post/6db4c0a5-ff28-480f-877e-312a8ec75270/image.png"></p>
<p>페이지 타이틀을 나타내는 <code>&lt;title&gt;</code>태그는 중요하다.</p>
<ul>
<li>SEO에 영향을 미친다.</li>
<li>UX에도 영향을 미친다.</li>
<li>웹 접근성에도 영향을 미친다.<br>
(화면 낭독기에서 제일먼저 읽어주므로 중요하다.)</li>
</ul>
<h3 id="작성-팁">작성 팁</h3>
<ul>
<li>본문을 잘 설명하는 키워드 중심으로 자것ㅇ한다.</li>
<li>페이지마다 구체적이고 고유한 키워드를 사용한다.</li>
<li>구체적인 키워드를 앞쪽에 배치한다.</li>
<li>가능한 짧게 작성한다. (depth는 2~3 단계로 구성하자)</li>
<li><code>-</code>, <code>|</code>, <code>:</code> 등으로 구분자를 둔다.</li>
</ul>
<p>ex)</p>
<ul>
<li>All Standards and Drafts - W3C</li>
<li>갤럭시 S | Samsung 대한민국</li>
<li>The Biden-Harris Administration | The White House</li>
</ul>
<hr>
<h2 id="메타-디스크립션---html-head">메타 디스크립션 - html, head</h2>
<p><img src="https://media.vlpt.us/images/ginameee/post/63667e78-43fb-433d-ac6e-bf90a5c367c3/0745F2B6-7E8F-4C61-A5DF-C33E552CDDF9.png"></p>
<p><img src="https://media.vlpt.us/images/ginameee/post/36d5fb2a-ec27-424c-9f45-b2b146a47838/image.png"></p>
<h2 id="html-lang">html lang</h2>
<p><strong>HTML 문서의 사용 Language 를 의미한다.</strong></p>
<ul>
<li>검색엔진이 특정 언어의 페이지를 검색할 때 도움</li>
<li>화면낭독기를 사용하는 유저가 어떤 언어를 선택해야할지 힌트를 준다.<br>
(<strong>접근성 측면에서 중요하다</strong>)</li>
<li>But 구글은 lang 속성을 신뢰하지않는다.</li>
</ul>
<h2 id="meta-namedescription">meta name="description"</h2>
<p><strong>검색결과 화면에 노출되는 텍스트를 의미한다.</strong><br>
사이트에 대한 설명을 적는다.</p>
<h2 id="meta-namekeywords">meta name="keywords"</h2>
<p><strong>페이지의 검색 키워드</strong></p>
<p>구글은 keywords를 신뢰하지않는다.<br>
마케터들이 어뷰징하기 시작하여, 오히려 검색결과에 혼동을 준다고 판단했기 때문</p>
<h2 id="meta-nameviewport">meta name="viewport"</h2>
<p><strong>모바일 디바이스에서 최적화되어 볼 수 있는지에 대한 정보를 검색엔진에 제공한다.</strong></p>
<p>viewport란, 브라우저 화면안의 영역을 말한다.<br>
데스크탑에서는 사용자가 제어할 수 있다.<br>
그러나 모바일에서는 문서 전체의 크기가 viewport가 된다.</p>
<p><strong>즉, PC와 모바일에서의 viewport의 정의가 다르다.</strong></p>
<p>모바일 디바이스에서 viewport를 화면크기로 명시적으로 지정해주기 위해서 사용되는 설정값이다.<br>
<code>width=device-width</code>는 모바일에서도 viewport의 width가 디바이스의 width가 된다.</p>
<h2 id="meta-name-og--twitter">meta name= "og:##" | "twitter:##"</h2>
<p><img src="https://media.vlpt.us/images/ginameee/post/24cd7b6d-7d5a-4c12-a008-b68fde7c2e20/image.png"></p>
<p>표준은 아니다.<br>
그러나 다양한 플랫폼에서 참조하고 있는 데이터다.<br>
SNS에서 더 다양한 노출을 원한다면 정의해놓자.</p>
<ul>
<li><a href="https://developers.facebook.com/tools/debug">https://developers.facebook.com/tools/debug</a></li>
<li><a href="https://cards-dev.twitter.com/validator">https://cards-dev.twitter.com/validator</a></li>
</ul>
<p>사이트가 SNS에서 어떤식으로 노출이 되는지 확인할 수 있다.</p>
<hr>
<h2 id="기타">기타</h2>
<p>네이버에서의 검색노출최적화를 원한다면 <a href="https://searchadvisor.naver.com/start%EB%A5%BC">https://searchadvisor.naver.com/start를</a> 참조하자</p>
<hr>
<h2 id="참고">참고</h2>
<p><a href="https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202108/174842-24/%5B%ED%8C%A8%EC%8A%A4%ED%8A%B8%EC%BA%A0%ED%8D%BC%EC%8A%A4%5D-%EA%B5%90%EC%9C%A1%EA%B3%BC%EC%A0%95%EC%86%8C%EA%B0%9C%EC%84%9C-the-red---%EA%B2%AC%EA%B3%A0%ED%95%9C-ui-%EC%84%A4%EA%B3%84%EB%A5%BC-%EC%9C%84%ED%95%9C-%EB%A7%88%ED%81%AC%EC%97%85-%EA%B0%80%EC%9D%B4%EB%93%9C-by-%EC%A0%95%EC%B0%AC%EB%AA%85.pdf">https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202108/174842-24/[%ED%8C%A8%EC%8A%A4%ED%8A%B8%EC%BA%A0%ED%8D%BC%EC%8A%A4]-%EA%B5%90%EC%9C%A1%EA%B3%BC%EC%A0%95%EC%86%8C%EA%B0%9C%EC%84%9C-the-red---%EA%B2%AC%EA%B3%A0%ED%95%9C-ui-%EC%84%A4%EA%B3%84%EB%A5%BC-%EC%9C%84%ED%95%9C-%EB%A7%88%ED%81%AC%EC%97%85-%EA%B0%80%EC%9D%B4%EB%93%9C-by-%EC%A0%95%EC%B0%AC%EB%AA%85.pdf</a></p></div></div>

ginameee.log

Jangchun Lee

HTML을 의미에 맞춰서 잘 작성하면 검색 엔진에 더 잘 노출될 수 있도록 만들 수 있다.
SEO에 영향을 주는 요인들
검색 결과 페이지 노출 대비 클릭률
페이지 타이틀
메타 디스크립션
로딩 속도
콘텐츠의 양, 질, 개연성
백링크: 다른 웹 페이지로부터 인용(링크)되는 횟수
사용자 경험
CLS 
LCP
페이지 타이틀
페이지 타이틀을 나타내는 <title>태그는 중요하다.
SEO에 영향을 미친다.
UX에도 영향을 미친다.
웹 접근성에도 영향을 미친다.
(화면 낭독기에서 제일먼저 읽어주므로 중요하다.)
작성 팁
본문을 잘 설명하는 키워드 중심으로 자것ㅇ한다.
페이지마다 구체적이고 고유한 키워드를 사용한다.
구체적인 키워드를 앞쪽에 배치한다.
가능한 짧게 작성한다. (depth는 2~3 단계로 구성하자)
-, |, : 등으로 구분자를 둔다.
ex)
All Standards and Drafts - W3C
갤럭시 S | Samsung 대한민국
The Biden-Harris Administration | The White House
메타 디스크립션 - html, head
html lang
HTML 문서의 사용 Language 를 의미한다.
검색엔진이 특정 언어의 페이지를 검색할 때 도움
화면낭독기를 사용하는 유저가 어떤 언어를 선택해야할지 힌트를 준다.
(접근성 측면에서 중요하다)
But 구글은 lang 속성을 신뢰하지않는다.
meta name="description"
검색결과 화면에 노출되는 텍스트를 의미한다.
사이트에 대한 설명을 적는다.
meta name="keywords"
페이지의 검색 키워드
구글은 keywords를 신뢰하지않는다.
마케터들이 어뷰징하기 시작하여, 오히려 검색결과에 혼동을 준다고 판단했기 때문
meta name="viewport"
모바일 디바이스에서 최적화되어 볼 수 있는지에 대한 정보를 검색엔진에 제공한다.
viewport란, 브라우저 화면안의 영역을 말한다.
데스크탑에서는 사용자가 제어할 수 있다.
그러나 모바일에서는 문서 전체의 크기가 viewport가 된다.
즉, PC와 모바일에서의 viewport의 정의가 다르다.
모바일 디바이스에서 viewport를 화면크기로 명시적으로 지정해주기 위해서 사용되는 설정값이다.
width=device-width는 모바일에서도 viewport의 width가 디바이스의 width가 된다.
meta name= "og:##" | "twitter:##"
표준은 아니다.
그러나 다양한 플랫폼에서 참조하고 있는 데이터다.
SNS에서 더 다양한 노출을 원한다면 정의해놓자.
https://developers.facebook.com/tools/debug
https://cards-dev.twitter.com/validator
사이트가 SNS에서 어떤식으로 노출이 되는지 확인할 수 있다.
기타
네이버에서의 검색노출최적화를 원한다면 https://searchadvisor.naver.com/start를 참조하자
참고
https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202108/174842-24/[%ED%8C%A8%EC%8A%A4%ED%8A%B8%EC%BA%A0%ED%8D%BC%EC%8A%A4]-%EA%B5%90%EC%9C%A1%EA%B3%BC%EC%A0%95%EC%86%8C%EA%B0%9C%EC%84%9C-the-red---%EA%B2%AC%EA%B3%A0%ED%95%9C-ui-%EC%84%A4%EA%B3%84%EB%A5%BC-%EC%9C%84%ED%95%9C-%EB%A7%88%ED%81%AC%EC%97%85-%EA%B0%80%EC%9D%B4%EB%93%9C-by-%EC%A0%95%EC%B0%AC%EB%AA%85.pdf

검색 엔진 밥상 차려주기

댓글