<div id="readability-page-1" class="page"><div id="root"><div><p>쉽게 확인/수정할 수 있는 순으로 정리해본다.</p>
<h2 id="lighthouse의-seo-점수-체크">lighthouse의 SEO 점수 체크</h2>
<ul>
<li>lighthouse 를 통하면 SEO 측면에서 어떤부분이 잘못됐는지, 기본적인 개선점은 무엇인지 알려준다.<br>
<img src="https://velog.velcdn.com/images/ginameee/post/4b1a98f1-2b51-49d0-b9b4-dfd1b987eaef/image.png"></li>
</ul>
<h2 id="이미지-체크">이미지 체크</h2>
<ul>
<li>이미지에는 <code>&lt;img&gt;</code> 태그를 사용하고있는지 확인한다.<ul>
<li>나쁜 예시: <code>&lt;div style="background-image:url(puppy.jpg)"&gt;골든 리트리버 강아지&lt;/div&gt;</code> </li>
</ul></li>
<li>이미지마다 충분한 alt 태그로 설명을 하고 있는지 확인</li>
<li>이미지의 URL도 최대한 직관적으로 구성하자. (의미없는 파일이름 지양)<br>
- 뒤에서 설명할 <code>페이지 URL을 단순하게 구성</code> 항목과 같은 맥락</li>
</ul>
<h2 id="링크이동방식-체크">링크이동방식 체크</h2>
<ul>
<li>div나 button의 <code>onclick</code> 을 통한 링크이동보다 <code>&lt;a\&gt;</code> 를 사용하자.<br>
- 구글 봇이 페이지 내에 <code>&lt;a \&gt;</code> 태그의 <code>href</code>값을 참조해 연관된 페이지도 인덱싱한다.</li>
<li><code>&lt;a\&gt;</code> 에 올바른 href 값이 들어있는지 확인한다.</li>
</ul>
<h2 id="페이지-url을-단순하게-구성">페이지 URL을 단순하게 구성</h2>
<p>자세한 내용은 <a href="https://developers.google.com/search/docs/crawling-indexing/url-structure?hl=ko">가이드</a> 를 참고하자.</p>
<ul>
<li>권장<br>
- URL에 간단하면서 구체적인 단어를 사용<ul>
<li>꼭 영어를 쓸 필요는 없다.</li>
<li>현지단어를 사용해도 된다. (필요에 따라 UTF-8 인코딩을 사용해도 됨)</li>
</ul></li>
<li>지양<br>
- URL에 ASCII가 아닌 문자를 사용을 지양하자.<br>
- URL에 읽을 수 없는 긴 ID 숫자를 사용을 지양하자.<ul>
<li>세션과 같은 값들은 쿠키를 사용하자.</li>
</ul></li>
</ul>
<h2 id="outline-구성-확인">outline 구성 확인</h2>
<ul>
<li>구글봇이 페이지 컨텐츠를 잘 이해할 수 있도록 페이지를 잘 구조화 시켜야 한다. (<a href="https://velog.io/@ginameee/HTML-%EA%B0%9C%EC%9A%94-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-%EC%9D%B4%ED%95%B4">참고</a>)</li>
<li><a href="https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?hl=ko">HeadingMaps Extension</a> 를 활용해 outline이 잘 구성되어있는지 확인하자.</li>
<li><code>heading</code> 태그를 사용을 권장하며, css 로 hide 시켜 미노출 시키더라도 구조상으로 갖고잇는게 낫다. </li>
<li><code>section</code>을 <code>heading</code> 없이 사용해선 안된다.</li>
</ul>
<h2 id="컨텐츠와-이미지를-적절히-배치">컨텐츠와 이미지를 적절히 배치</h2>
<ul>
<li>사실 페이지의 기획단계에서 논의되어야 하는 부분이긴 하다.</li>
<li>이미지만 있는 페이지는 의미가 없다. 적절한 설명이 함께 버무려져야 한다.<ul>
<li>진짜 이미지만 있는 컨텐츠라면, <code>alt</code> 작성을 충분히하고, <a href="https://developers.google.com/search/docs/appearance/google-images?sjid=9407237272941409043-AP&amp;visit_id=638678382242416149-2129339771&amp;rd=1#use-an-image-sitemap">이미지 사이트</a>맵 작성과 <a href="https://developers.google.com/search/docs/appearance/google-images?sjid=9316302918870046315-AP&amp;visit_id=638217160647687615-435381479&amp;rd=1&amp;hl=ko#structured_data">구조화된 데이터</a>를 제공을 통해 충분한 맥락을 제공해주자</li>
<li>아니면 이미지와 관련된 텍스트요소를 추가하고 css로 hide 시켜놓는 방법을 고려할수도있다.</li>
</ul></li>
</ul>
</div><div><p><a href="https://velog.io/@ginameee/posts"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASbSURBVHgB7Z0tTytBFIYP914BDiQ4cIADB0EhwYFE8ifq7g/hJ2CRSCQ4kOCobF3ruHk3maS5aSnbdnfPOe/7JE0oCTvTnmc+dvbMsNbr9b5M0PLLBDUSgBwJQI4EIEcCkCMByJEA5EgAciQAORKAHAlAjgQgRwKQIwHIkQDkSAByJAA5EoAcCUCOBCBHApAjAciRAORIAHIkADkSgBwJQI4EIEcCkCMByJEA5EgAciQAOX+MhPX1dTs+Prbt7W3b3d21jY2N6ndgPB7bYDCw4XBor6+v9vHxUb1nIL0Ae3t7dn5+XgV9FhABYuC1v79f/Q4SPD8/28vLi2UmrQA/Cfx34O/wwjXu7u7S9gi/z87O/loyELTr62vb2tqyZcFQcXp6Wv2MXiEb6SaBCDwEWDVFqmykEgABOjo6sqbAtbNJkEaAi4uLRoNfQBmXl5eWhRQCIChlnG6Dk5OTVstrkvACYKLXxJg/D5RZ1hEiE14ABGIVs/26IPgZeoHQAiDwbYz7s4AA0XuB0AIsusizKsrycmRCC+Dhyz84OLDIhBUAra/rHgCgDpGHgbAC7OzsmBc81aUuYQXY3Nw0L3iqS13CCtDFrd8sPNWlLsoIIkcCkBNWAE8JGpGTRcIKgPw9L3iqS13CCvD5+Wle8FSXuoQVAJm8HlK0UAfUJSqhJ4Fvb2/WNcgcjkxoAfDld936oieKhhYAwX96erKuwJ6B6Oni4dcBIEAXvQAC//j4aNEJLwCC30UgUGaGzSIpVgLRC7Q5FKCsLFvG0iwFPzw8tBIUlIGyspDqWcD9/X2jEuDaKCMT6R4GIUBNzAlwzWzBByl3ByNYaK23t7dLP6vHfT6u9/7+bhlZ6/V6X5YYpI0jebRu/mD2wBfSHxCBngAv9ASQ4PDwsErhwvvJE0JGo1EV9H6/72KFsS1SCDAZyFngnh2vVUwSUV4WQUILULZnlR06aMGYqDW1QDN56khZho6+Ghh2DoBgXF1dTZ3koZWvcqWubECdtg0NZUQ+QiakAGjxOA9gHhABj4wXeWyMHgX5/j85Zwi9AXoeD4+n6xJOAASk7nbwkjyCGT0meXg/mcWDYOMsIJwShtaO3mWRHT/odaINCaHmAIsEHyCQOP6tHAHXFKVukSQIsxK4aPDbBnWMdG5ACAHwhUYIfgHzEwwjEXAvQFdHwCzLzc1NiC1jrgXA2I31/Ijbr1HnCEfKuRagq/N/VgXuJLzPB9wKgMBnOITJu8RuBUDXnwHvQ4FLAbDkGrnr/x8MBV7vClwKEHHWPw+vn8mdANlaf8FrL+BOgIytv+Dxs7kSAC0kY+sveOwFXAnQ5bGvbdH0A6m6uBLAw8GPTePtaFk3AmTv/gtYF/A0DLgRgKH1Fzx9VjcCIBuHBU89nRsBkKrFgqfNJm5SwpBGVc7fz/CvWKZRUsk9bS1PvzVMfI+OiiVHApAjAciRAORIAHIkADkSgBwJQI4EIEcCkCMByJEA5EgAciQAORKAHAlAjgQgRwKQIwHIkQDkSAByJAA5EoAcCUCOBCBHApAjAciRAORIAHIkADkSgBwJQI4EIOcfGjV2tEfztqEAAAAASUVORK5CYII=" alt="profile"></a></p><div><p>오늘 먹은 음식도 기억이 안납니다. 그래서 모든걸 기록합니다.</p></div></div><div><h4>0개의 댓글</h4></div></div></div>

ginameee.log

Jangchun Lee

쉽게 확인/수정할 수 있는 순으로 정리해본다.
lighthouse의 SEO 점수 체크
lighthouse 를 통하면 SEO 측면에서 어떤부분이 잘못됐는지, 기본적인 개선점은 무엇인지 알려준다.
이미지 체크
이미지에는 <img> 태그를 사용하고있는지 확인한다.
나쁜 예시: <div style="background-image:url(puppy.jpg)">골든 리트리버 강아지</div> 
이미지마다 충분한 alt 태그로 설명을 하고 있는지 확인
이미지의 URL도 최대한 직관적으로 구성하자. (의미없는 파일이름 지양)
뒤에서 설명할 페이지 URL을 단순하게 구성 항목과 같은 맥락
링크이동방식 체크
div나 button의 onclick 을 통한 링크이동보다 <a\> 를 사용하자.
구글 봇이 페이지 내에 <a \> 태그의 href값을 참조해 연관된 페이지도 인덱싱한다.
<a\> 에 올바른 href 값이 들어있는지 확인한다.
페이지 URL을 단순하게 구성
자세한 내용은 가이드 를 참고하자.
권장
URL에 간단하면서 구체적인 단어를 사용
꼭 영어를 쓸 필요는 없다.
현지단어를 사용해도 된다. (필요에 따라 UTF-8 인코딩을 사용해도 됨)
지양
URL에 ASCII가 아닌 문자를 사용을 지양하자.
URL에 읽을 수 없는 긴 ID 숫자를 사용을 지양하자.
세션과 같은 값들은 쿠키를 사용하자.
outline 구성 확인
구글봇이 페이지 컨텐츠를 잘 이해할 수 있도록 페이지를 잘 구조화 시켜야 한다. (참고)
HeadingMaps Extension 를 활용해 outline이 잘 구성되어있는지 확인하자.
heading 태그를 사용을 권장하며, css 로 hide 시켜 미노출 시키더라도 구조상으로 갖고잇는게 낫다. 
section을 heading 없이 사용해선 안된다.
컨텐츠와 이미지를 적절히 배치
사실 페이지의 기획단계에서 논의되어야 하는 부분이긴 하다.
이미지만 있는 페이지는 의미가 없다. 적절한 설명이 함께 버무려져야 한다.
진짜 이미지만 있는 컨텐츠라면, alt 작성을 충분히하고, 이미지 사이트맵 작성과 구조화된 데이터를 제공을 통해 충분한 맥락을 제공해주자
아니면 이미지와 관련된 텍스트요소를 추가하고 css로 hide 시켜놓는 방법을 고려할수도있다.

SEO 기본 체크리스트

댓글