오늘의 꿀팁
💡 더미 이미지
실제 사용할 이미지를 넣기 전에 매우 간단하게 이미지 영역을 잡아줄 수 있다<img src="http://placehold.it/100x100" alt="">
💡 텍스트 되도록 복붙하기 & 맞춤법 검사 돌리기(오타 확인)
📌 검색 엔진 최적화(SEO)
검색엔진이란
웹이나 컴퓨터 시스템에 저장된 정보를 찾아주는 프로그램
구글 검색, 네이버 검색, 다음 검색 등
검색엔진 최적화란
우리가 제작한 사이트를 빠르게, 상위에 노출하는 방법을 모아 웹사이트에 적용하는 것
가이드
1. URL
-
언더바(_) 사용 금지. 단어구분은 하이픈(-)사용
- 구글 검색 엔진은 하이픈(-)을 단어 구분자로 취급한다
-
최대한 짧지만 해당 페이지를 유추할수 있는 단어로 구성하기
- url 주소 자체에 키워드를 포함하면 좋다
-
depth는 2-4 정도, 6이하
https://example.com/depth1/depth2/depth3/depth4/ -
대표 url 설정하기(캐노니컬(canonical) 태그)
<link rel="canonical" href="https://example.com/"/><title>태그를 통해 정확한 페이지 제목 정하기
-
<title>태그는 검색 엔진에 페이지의 주제가 무엇인지 알려준다- 한 가지 사이트에 소속되어 있다고 해서 단일한 내용으로 페이지 제목을 통일하는 것은 좋지 않다. 페이지 마다 고유한 제목을 사용하면 검색 엔진은 각각의 페이지가 서로 어떻게 쓰임이 다른지 파악할 수 있다.
- 사용자의 피로도를 낮추기 위해 페이지 제목을 먼저, 그리고 사이트의 제목을 적어주는 것이 좋다
-
짧고 적절한 제목을 사용한다
- 제목이 너무 길거나 관련성이 낮은 것으로 판단되면 검색 엔진은 검색 결과에 제목의 일부만 표시하거나 자동으로 생성된 다른 제목을 표시할 수도 있다
- 사용자가 사용한 검색어나 사용기기에 따라 서로 다른 제목을 표시하는 경우도 있다. 너무 길거나 불필요한 내용을 넣지 않도록 하는게 좋다.
- 약 60자를 넘지 않아야 한다. 그보다 길어지게 된다면 브라우저에서 노출되는 제목이 축소되어 보일 수 있다.
- 메타 태그
description- 페이지가 담고 있는 내용을 요약하여 서술한다
- 약 250자 이하로 작성한다
- 웹페이지를 클릭하도록 유도하는 광고 문구. 중요한 타겟키워드를 문구에 포함하여 작성하는 것이 좋다. 클릭률을 높이고 돋보이게 할 수 있는 방법을 고민해야 한다.
<meta name="description"
content="Google 지도에서 지역정보를 검색하고 지도를 살펴보거나 운전경로 정보를 검색합니다.">- The Open Graph protocol
- 일반적인 공유 프로토콜. 표준은 아니지만 워낙 광범위하게 사용되기 때문에 거의 표준처럼 작동한다
- SNS에서 주로 사용한다. SNS는 간접적인 트래픽을 유발하고 방문자를 일으키는 좋은 수단이다. 때문에 좀 더 보기 좋은 링크를 만들어 방문을 유도하는것은 SEO에 매우 중요하다.
<meta property="og:title" content="페이지 제목" />
<meta property="og:type" content="컨텐츠 타입" />
<meta property="og:url" content="페이지 주소" />
<meta property="og:image" content="페이지 썸네일 이미지 주소" />
<meta property="og:description" content="페이지 설명" />- 트위터를 위한 카드 형태의 공유 프로토콜
<meta name="twitter:card" content="카드의 타입">
<meta name="twitter:title" content="카드의 제목">
<meta name="twitter:description" content="카드 설명">
<meta name="twitter:image" content="카드 썸네일 이미지 주소">- 마크업
- 웹 표준 규약 준수
- 제목 태그 사용하여 중요한 텍스트 강조하기
<img>태그에 대체 텍스트 넣기- 이미지 검색도 이미지의 파일명과 대체 텍스트가 영향을 미친다
<strong>,<em>사용하여 키워드 강조하기- 의미 있는 링크 텍스트 작성하기
- "여기를 클릭하십시오" 및 "자세히 알아보기”가 아닌 구체적인 텍스트로 작성한다
<p>
위니브가 궁금하다면
<a href="https://www.youtube.com/channel/UC4GnvNKtuJ4cqWsYjxNxAEQ">
제주코딩베이스캠프 유튜브
</a>
를 확인하세요!
</p>- robot.txt 파일 작성하기
- robots.txt 파일을 사용하여 사이트에서 크롤러가 액세스할 수 있는 파일을 제어할 수 있다
- 도메인 또는 하위 도메인에서 지정된 파일 경로에 액세스하는 것을 차단하거나 허용한다
- 파일에서 다르게 지정하지 않는 한 모든 파일은 암시적으로 크롤링을 허용한다
User-agent: Googlebot
Disallow: /nogooglebot/: 구글 검색로봇 nogooglebot 수집 비허용
- sitemap.xml 파일 작성하기
- 웹 사이트 내 모든 페이지의 목록을 나열한 파일
- 검색 엔진에게 사이트 내 모든 페이지 목록을 제공하여 크롤링되고 색인될 수 있게 도와준다
- sitemap.xml의 위치를 robots.txt에 기록해서 검색 로봇이 사이트의 콘텐츠를 더 잘 수집할 수 있도록 도울 수 있다
User-agent: *
Allow: /
Sitemap: https://www.example.com/sitemap.xml💡 Lighthouse 웹페이지 품질 개선(성능, 접근성, 프로그레시브 웹 앱 호환성)을 위해 제공되는 크롬 자동 감사 도구 해당 검사가 완벽한 것이 아니고 기본 사항만을 검증하기 때문에 참고용으로 활용한다
💻 diary 수정
파비콘, SEO까지 완성한 페이지!
https://yoonmallang22.github.io/HTML-CSS/practice%F0%9F%92%BB/diary/
💻 cinema 실습
https://github.com/yoonmallang22/HTML-CSS/tree/main/practice%F0%9F%92%BB/cinema
