접근성 및 검색 엔진 최적화를 위해서는
html head태그를 꼼꼼하게 작성해야했다
프로젝트를 끝내고,
lighthouse 평가 항목의 세부내용을 자세히 읽어보았다
html 및 head 태그에서
고려되어야 할 내용들을 짧게 정리하고자 한다😆
(굵직한 것만 정리..)
html 태그에 lang 속성을 지정했는가?
<html lang="en">- 스크린 리더기에게 어떠한 언어로 웹 페이지가 작성되었는지
알려주기 위해 html 태그에 lang 속성을 지정해주었다 - lighthouse의 접근성 점검 항목으로 나와있다
📎 https://web.dev/html-has-lang/
title, meta:description, meta: keywords 지정
<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
1) title
영어로 60자 미만, 한글로 32자 미만이 좋음
2) meta:description
50 ~ 160자
3) meta:keywords
단어 형식으로 작성하고,
쉼표를 통해 구분
여러 개 작성 가능하지만 순서대로 맨 앞의 두 개의 키워드가
가장 중요
SNS 공유를 위한 meta 태그
- open graph의 prefix는 og이고,
마크업 시 property, content 속성을 사용 - twitter의 prefix는 twitter이고,
마크업 시 name, content 속성을 사용 - og를 통해 마크업을 했을 경우, twitter와 겹치는 내용은 마크업에서 제외시켜도 됨 => 트워터봇이 알아서 해석하고 대체 가능
<!-- 네이버, 카카오톡 등 기본 소셜 -->
<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
Fonts
웹 폰트는 로드되기까지 시간이 지연될 수 있다
웹 폰트가 적용되기 전에 텍스트를 먼저 보여줄 수 있다면
사용자들이 웹 페이지에서 무언가가 진행되고 있음을
인지할 수 있어서 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 부분은 웹페이지의 뇌🧠 라고 생각한다
앞으로 뇌를 더 촘촘히 채워나가야겠다
