접근성 및 검색 엔진 최적화를 위해서는
html head태그를 꼼꼼하게 작성해야했다
프로젝트를 끝내고,
lighthouse 평가 항목의 세부내용을 자세히 읽어보았다
html 및 head 태그에서
고려되어야 할 내용들을 짧게 정리하고자 한다😆
(굵직한 것만 정리..)
<html lang="en">
📎 https://web.dev/html-has-lang/
<head>
<title>페이지 제목</title>
<meta name="description" content="페이지 설명" />
<meta name="keywords" content="페이지 키워드" />
</head>
title, meta:description, meta:keywords 는
검색엔진 최적화를 위하여
웹 사이트의 페이지마다 설정해주는 것이 좋다
📎 검색엔진 최적화 기본 가이드 링크
https://developers.google.com/search/docs/beginner/seo-starter-guide?visit_id=637734390741304741-2711618389&rd=1
영어로 60자 미만, 한글로 32자 미만이 좋음
50 ~ 160자
단어 형식으로 작성하고,
쉼표를 통해 구분
여러 개 작성 가능하지만 순서대로 맨 앞의 두 개의 키워드가
가장 중요
<!-- 네이버, 카카오톡 등 기본 소셜 -->
<meta property="og:title" content="..."> : 콘텐츠 제목
<meta property="og:url" content="..."> : 웹페이지 URL
<meta property="og:type" content="..."> : 웹페이지 타입(blog, website 등)
<meta property="og:image" content="..."> : 표시되는 이미지
<meta property="og:site_name" content="..."> : 웹사이트 이름(URL과 다름)
<meta property="og:description" content="..."> : 웹페이지 설명(제목 아래에 표시)
Open Graph 프로토콜을 활용하면
소셜 네트워크 서비스 내에서 링크가 공유될 때
그 링크의 내용을 더 잘 나타낼 수 있다
Open Graph 사이트에서 보면
기본적인 metadata로
og:title, og:type, og:image, og:url이 있고,
선택적으로
og:description, og:site_name, og:locale 등을 첨가하여
웹 페이지를 더 풍부하게 설명할 수 있는 듯 하다
📎 Open Graph 사이트
https://ogp.me
<!-- 트위터 -->
<meta name="twitter:card" content="..."> : 트위터 카드 타입(요약정보, 사진, 비디오)
<meta name="twitter:title" content="..."> : 콘텐츠 제목
<meta name="twitter:description" content="..."> : 웹페이지 설명
<meta name="twitter:image" content="..."> : 표시되는 이미지
twitter:card의 content 종류에는 summary, summary_large_image, app, player 가 있다
그 외에 title과 description, image는 og를 작성했다면
작성하지 않아도 괜찮다
선택적으로 twitter:site, twitter:creator 속성을 추가해도 된다
📎 트위터 카드 마크업 가이드https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started
📎 트위터 카드 미리보기
https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup
웹 폰트는 로드되기까지 시간이 지연될 수 있다
웹 폰트가 적용되기 전에 텍스트를 먼저 보여줄 수 있다면
사용자들이 웹 페이지에서 무언가가 진행되고 있음을
인지할 수 있어서 ux가 향상될 수 있다
이를 위하여,
CSS의 @font-face의 property인 font-display: swap을 설정해주면
일시적으로 브라우저 시스템의 폰트가 보여질 것이다
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&family=Rubik:wght@300;400&display=swap" rel="stylesheet" />
구글 폰트 embed 시 복사한 코드를 자세히 보면
display=swap이 지정되어 있는 것이 보인다
📎
https://web.dev/font-display/
https://developers.google.com/web/updates/2016/02/font-display
lighthouse 세부항목을 고려하여
head태그를 꼼꼼하게 살펴보면서,
보이지 않았던 부분들이 보이기 시작했다
head 부분은 웹페이지의 뇌🧠 라고 생각한다
앞으로 뇌를 더 촘촘히 채워나가야겠다