🐱‍👤 원문 : https://github.com/thedaviddias/Front-End-Checklist

GitHub - thedaviddias/Front-End-Checklist: 🗂 The perfect Front-End Checklist for modern websites and meticulous developers

🗂 The perfect Front-End Checklist for modern websites and meticulous developers - thedaviddias/Front-End-Checklist

github.com

프론트엔드 체크리스트

프론트엔드 체크리스트는 웹사이트나 HTML 페이지를 프로덕션에 출시하기 전에 가져야 할 모든 요소 및 테스트 항목을 상세하게 나열한 목록입니다.

다른 체크리스트:
🎮 프론트엔드 성능 체크리스트 • 💎 프론트엔드 디자인 체크리스트

사용 방법

항목의 필요성을 기준으로 3단계로 정의했습니다:

🟢 해당 항목은 권장되지만 특정 상황에서 생략할 수 있다는 것을 나타냅니다.
🟠 해당 항목은 강력히 권장되지만 매우 특정한 경우에만 생략할 수 있습니다. 그러나 이러한 요소를 생략하면 성능이나 SEO에 부정적인 영향을 줄 수 있습니다.
🔴 해당 항목은 어떠한 경우에도 생략할 수 없음을 나타냅니다. 이러한 요소를 제거하면 페이지 기능이 동작하지 않을 수 있거나 접근성 및 SEO 문제를 야기할 수 있습니다. 이러한 요소를 테스트할 때 우선순위로 두어야 합니다.

어떤 유형의 레퍼런스인지 이해하는 데 도움이 되는 이모티콘:

📖: 문서 또는 기사
🛠: 온라인 도구 / 테스트 도구
📹: 미디어 또는 비디오 콘텐츠

Head

참고: HTML 문서의에서 찾을 수 있는 모든 것에 대한 목록을 여기에서 찾을 수 있습니다.

메타 태그

Doctype: 🔴 Doctype은 HTML5이며 모든 HTML 페이지의 맨 위에 있습니다.

<!doctype html> <!-- HTML5 -->

📖 Determining the character encoding - HTML5 W3C

다음 2개의 메타 태그(Charset 및 Viewport)는 head 태그 내에서 가장 먼저 와야 합니다.

Charset: 🔴 문자 인코딩(UTF-8)이 올바르게 선언되었습니다.

<!-- 문서의 문자 인코딩을 설정하세요. -->
<meta charset="utf-8">

Viewport: 🔴 뷰포트가 올바르게 선언되었습니다.

<!-- 반응형 웹 디자인을 위한 뷰포트 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Title: 🔴 모든 페이지에는 타이틀이 사용됩니다 (SEO: Google은 제목에 사용된 문자의 픽셀 너비를 계산하고 472에서 482 픽셀 사이에서 자릅니다. 평균 문자 제한은 약 55자입니다).

<!-- Document Title -->
<title>Page Title less than 55 characters</title>

📖 Title - HTML - MDN

🛠 SERP Snippet Generator

Description: 🔴 메타 설명이 제공되었으며, 이는 고유하며 150자를 초과하지 않습니다.

<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">

📖 Meta Description - HTML - MDN

Favicons: 🟠 각 파비콘이 만들어졌으며 올바르게 표시됩니다. 만약 favicon.ico만 가지고 있다면, 이를 사이트의 루트에 둡니다. 보통은 아무런 마크업을 사용하지 않아도 됩니다. 그러나 아래의 예시처럼 링크를 걸어두는 것이 좋습니다. .ico 형식 대신 PNG 형식이 권장됩니다. (크기: 32x32px).

<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Recommended favicon format -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">

🛠 Favicon Generator

🛠 RealFaviconGenerator

📖 Favicon Cheat Sheet

📖 Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? - CSS Tricks

📖 PNG favicons - caniuse

Apple Web App Meta: 🟢 Apple 메타 태그가 존재합니다.

<!-- Apple Touch Icon (at least 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">

<!-- To run the web application in full-screen -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Status Bar Style (see Supported Meta Tags below for available values) -->
<!-- Has no effect unless you have the previous meta tag -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

📖 Configuring Web Applications

📖 Supported Meta Tags

Canonical: 🟠 중복 콘텐츠를 피하기 위해 rel="canonical"을 사용하세요.

<!-- 중복 콘텐츠 문제를 방지합니다. -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-read.html">

📖 Use canonical URLs - Search Console Help - Google Support

📖 5 common mistakes with rel=canonical - Google Webmaster Blog

📖 SEO 초보자를 위한 '캐노니컬 태그' 설명하기

HTML 태그

Language attribute: 🔴 웹사이트의 lang 속성이 지정되어 있고 현재 페이지의 언어와 관련이 있습니다.

<html lang="en">

Direction attribute: 🟠 텍스트 방향이 HTML 태그에 지정되어 있습니다 (다른 HTML 태그에서도 사용할 수 있습니다).

<html dir="rtl">

📖 dir - HTML - MDN

CSS Critical: 🟠 CSS 크리티컬(또는 "above the fold: 아무런 행동을 하지 않은 기본 화면")은 페이지의 가시적인 부분을 렌더링하는 데 사용되는 모든 CSS를 수집합니다. 이는 기본 CSS 호출 전에 <style></style> 사이의 한 줄로 포함됩니다(최소화됨).

🛠 Critical by Addy Osmani on GitHub automates this.

CSS order: 🔴 모든 CSS 파일은 <head> 안에서 어떤 자바스크립트 파일보다 먼저 로드됩니다. (페이지의 맨 위에서 가끔씩 자바스크립트 파일이 비동기적으로 로드되는 경우를 제외하고)

⬆ 페이지 상단으로 이동

HTML

모범 사례

HTML5 Semantic Elements: 🔴 HTML5 의미 있는(Semantic) 요소들이 적절하게 사용됩니다 (header, section, footer, main...).

📖 HTML Reference

Error pages: 🔴 404 페이지와 5xx 에러 페이지가 존재합니다. 5xx 에러 페이지는 해당 CSS가 통합되어 있어야 합니다 (현재 서버에서 외부 호출 없이).
Noopener: 🟠 만약 target="_blank"로 외부 링크를 사용한다면, 링크에는 탭내빙을 방지하기 위해 rel="noopener" 속성이 있어야 합니다. 오래된 버전의 Firefox를 지원해야 한다면, rel="noopener noreferrer"를 사용합니다.

📖 About rel=noopener

📖 하이퍼링크를 신뢰할 수 없다면? noopener, noreferrer, nofollow

Clean up comments: 🟢 페이지를 프로덕션으로 보내기 전에 불필요한 코드를 제거해야 합니다.

HTML testing

HTML Lint: 🔴 HTML 코드에서 발생할 수 있는 문제를 분석하는 데 도움이 되는 도구를 사용합니다.

🛠 Dirty markup

🛠 webhint

Link checker: 🔴 페이지에 유효하지 않은 링크가 없고, 404 오류가 없습니다.

🛠 W3C Link Checker

Adblockers test: 🟠 광고 차단기를 사용해도 콘텐츠를 올바르게 표시합니다. 광고 차단기를 해제하도록 사람들에게 메시지를 제공할 수 있습니다.

📖 Use AdBlocking in your Dev Environment

⬆ 페이지 상단으로 이동

웹폰트

참고: 웹 폰트 사용으로 스타일이 적용되지 않은 텍스트의 순간적인 나타남 현상(Flash Of Unstyled Text) 또는 텍스트가 보이지 않는 순간적인 현상(Flash Of Invisible Text)이 발생할 수 있습니다. 이를 방지하기 위해 대체 폰트를 설정하거나 웹 폰트 로더를 활용하여 동작을 제어하는 것이 좋습니다.

📖 Google Technical considerations about webfonts

Webfont format: 🔴 모든 최신 브라우저에서 WOFF, WOFF2 및 TTF 형식을 지원합니다.

📖 WOFF - Web Open Font Format - Caniuse.

📖 WOFF 2.0 - Web Open Font Format - Caniuse.

📖 TTF/OTF - TrueType and OpenType font support

📖 Using @font-face - CSS-Tricks

Webfont size: 🔴 웹폰트 크기가 모든 변형을 포함하여 2 MB를 초과하지 않습니다.
Webfont loader: 🟢 웹폰트 로더를 사용하여 로딩 동작을 제어합니다.

🛠 Typekit Web Font Loader

⬆ 페이지 상단으로 이동

CSS

참고: 많은 프론트엔드 개발자가 따르는 CSS 가이드라인과 Sass 가이드라인을 살펴보세요. CSS 속성에 대한 의문이 있다면 CSS 레퍼런스를 방문하세요. 일관성을 위한 간단한 코드 가이드도 있습니다.

Responsive Web Design: 🔴 반응형 웹 디자인을 사용합니다.
CSS Print: 🟠 인쇄 스타일 시트가 각 페이지에서 제공되며 올바르게 설정되어 있습니다.
Preprocessors: 🟢 CSS 전처리기를 사용합니다. (예: Sass, Less, Stylus)
Unique ID: 🔴 ID를 사용하는 경우, 각각 페이지의 ID가 고유합니다.
Reset CSS: 🔴 CSS 리셋(reset), 정규화(normalize), 또는 재부팅(reboot)이 사용되고 최신 상태입니다. (부트스트랩이나 파운데이션 같은 CSS 프레임워크를 사용하는 경우, 정규화가 이미 포함되어 있습니다.)

📖 Reset.css

📖 Normalize.css

📖 Reboot

JS prefix: 🟢 자바스크립트 파일에서 사용되는 모든 클래스(또는 id)는 js- 로 시작하며 CSS 파일에 스타일이 지정되지 않습니다.

<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">

embedded or inline CSS: 🔴 <style> 태그에 CSS를 포함하거나 인라인 CSS를 사용하는 것을 지양합니다. 유효한 이유(예: 슬라이더의 배경 이미지, 중요한 CSS)만을 위해 사용합니다.
Vendor prefixes: 🔴 CSS 벤더 프리픽스를 사용하고 브라우저 지원 호환성에 따라 적절하게 생성합니다.

📖 CSS3 Vendor Prefix

🛠 Autoprefixer CSS online

성능

Concatenation: 🔴 CSS 파일이 하나의 파일로 병합됩니다. (HTTP/2의 경우에는 해당하지 않음)
Minification: 🔴 모든 CSS 파일이 최소화되었습니다.
Non-blocking: 🟠 CSS 파일은 DOM이 로드되는 데 시간이 걸리지 않도록 Non-Blocking(다른 주체의 작업에 관련없이 자신의 작업을 하는 것)되어야 합니다.

📖 loadCSS by filament group

📖 Example of preload CSS using loadCSS

📖 Sync/Async, Blocking/Non-Blocking 무슨 차이일까?

Unused CSS: 🟢 사용되지 않는 CSS를 제거합니다.

🛠 UnCSS Online

🛠 PurifyCSS

🛠 PurgeCSS

🛠 Chrome DevTools Coverage

CSS 테스트

Stylelint: 🔴 모든 CSS 또는 SCSS 파일에 오류가 없어야 합니다.

🛠 stylelint, a CSS linter

📖 Sass guidelines

Responsive web design: 🔴 모든 페이지는 다음의 중단점에서 테스트되었습니다: 320px, 768px, 1024px (분석에 따라 더 많거나 다를 수 있음).
Responsive Checker -*
- 🛠 Am I Responsive?
- 🛠 Mobile Friendly Test
- 🛠 Responsive Website Design Tester
- 🛠 Responsinator
- 🛠 XRespond

CSS Validator: 🟠 CSS가 테스트되고 관련된 오류가 수정되었습니다.

🛠 CSS Validator

Desktop Browsers: 🔴 모든 데스크톱 브라우저(Safari, Firefox, Chrome, EDGE 등)에서 모든 페이지가 테스트되었습니다.
Mobile Browsers: 🔴 모바일 브라우저(Native browser, Chrome, Safari 등)에서 모든 페이지가 테스트되었습니다.
OS: 🔴 모든 페이지가 모든 운영 체제(Windows, Android, iOS, Mac 등)에서 테스트되었습니다.
Design fidelity: 🟢 프로젝트 및 디자인의 품질에 따라 디자인과의 일관성을 유지해야 합니다. 코드 구현과 크리에이티브를 비교하고 일관성을 보장하기 위해 몇 가지 도구를 사용할 수 있습니다.

Pixel Perfect - Chrome Extension

Reading direction: 🔴 모든 페이지는 LTR 및 RTL 언어에 대해 지원해야하는 경우를 위해 테스트되어야 합니다.

📖 Building RTL-Aware Web Apps & Websites: Part 1 - Mozilla Hacks

📖 Building RTL-Aware Web Apps & Websites: Part 2 - Mozilla Hacks

⬆ 페이지 상단으로 이동

이미지

참고: 이미지 최적화에 대한 이해를 위해 Addy Osmani의 무료 eBook인 Essential Image Optimization 를 확인하세요.

모범 사례

Optimization: 🔴 모든 이미지가 브라우저에서 렌더링될 수 있도록 최적화되었습니다. 홈페이지와 같은 중요한 페이지에는 WebP 형식을 사용할 수 있습니다.

🛠 Imagemin

🛠 Use ImageOptim to optimise your images for free.

🛠 Use KeyCDN Image Processing for image optimization in real time.

🛠 Use Kraken.io awesome alternative for both png and jpg optimization. Up to 1mb per files on free plan.

🛠 TinyPNG optimises png, apng (animated png) and jpg images with very small loss in quality. Free and paid version available.

🛠 ZorroSVG jpg-like compression for transparent images using svg masking.

🛠 SVGO a Nodejs-based tool for optimizing SVG vector graphics files.

🛠 SVGOMG a web-based GUI version of SVGO for optimising your svgs online.

Picture/Srcset: 🟠 사용자의 현재 뷰포트에 가장 적합한 이미지를 제공하기 위해 picture/srcset을 사용합니다.

📖 How to Build Responsive Images with srcset

📖 picture elements 사용하기

📖 HTML IMG의 srcset과 sizes 속성

Retina: 🟢 레티나 디스플레이를 지원하기 위해 레이아웃 이미지를 2배 또는 3배로 제공합니다.

📖 레티나 디스플레이 대응하기

Sprite: 🟠 작은 이미지는 스프라이트 파일에 있습니다. (아이콘의 경우 SVG 스프라이트 이미지에 있을 수 있습니다.)
Width and Height: 🔴 이미지의 최종 렌더링 크기를 알고 있다면 <img>에 width와 height 속성을 설정하세요. (CSS 크기 지정에 대해서는 생략할 수 있습니다.)
Alternative text: 🔴 모든 <img>에는 이미지를 시각적으로 설명하는 대체 텍스트가 있어야 합니다.

📖 Alt-texts: The Ultimate Guide

Lazy loading: 🟠 이미지는 레이지 로딩되어 있습니다 (noscript 대체가 항상 제공됩니다).
- 🛠 Native lazy loading polyfill

⬆ 페이지 상단으로 이동

자바스크립트

모범 사례

JavaScript Inline: 🔴 HTML 코드와 혼합된 인라인 자바스크립트 코드가 없습니다.
Concatenation: 🔴 자바스크립트 파일이 연결되어 있습니다.
Minification: 🔴 자바스크립트 파일이 최소화되었습니다 (.min 접미사를 추가할 수 있습니다).

📖 Minify Resources (HTML, CSS, and JavaScript)

JavaScript security: 🔴

📖 Guidelines for Developing Secure Applications Utilizing JavaScript

noscript tag: 🟠 브라우저에서 스크립팅이 지원되지 않거나 현재 스크립팅이 꺼져 있는 경우 HTML 본문에 <noscript> 태그를 사용하세요. 이는 React.js와 같은 클라이언트 측 렌더링이 많이 필요한 애플리케이션에 유용할 것입니다. 예시를 참조하세요.

<noscript>
  이 앱을 실행하려면 자바스크립트를 활성화해야 합니다.
</noscript>

Non-blocking: 🟠 자바스크립트 파일은 async 속성을 사용하여 비동기적으로 로드되거나 defer 속성을 사용하여 지연되어 로드됩니다.

📖 Remove Render-Blocking JavaScript

Optimized and updated JS libraries: 🟠 프로젝트에서 사용되는 모든 자바스크립트 라이브러리가 필요하며(간단한 기능에는 Vanilla 자바스크립트를 사용하는 것이 좋습니다), 최신 버전으로 업데이트되어 있으며 불필요한 메서드로 자바스크립트가 과도하게 무거워지지 않도록 주의해야 합니다.

📖 You may not need jQuery

📖 Vanilla JavaScript for building powerful web applications

자바스크립트 테스트

ESLint: 🔴 ESLint에 의해 오류가 플래그되지 않습니다 (구성 또는 표준 규칙에 따라).

📖 ESLint - The pluggable linting utility for JavaScript and JSX

⬆ 페이지 상단으로 이동

보안

웹 사이트 스캔 및 체크

securityheaders.io

Observatory by Mozilla

모범 사례

HTTPS: 🔴 모든 페이지와 외부 콘텐츠(플러그인, 이미지 등)에 HTTPS가 사용됩니다.

🛠 Let's Encrypt - Free SSL/TLS Certificates

🛠 Free SSL Server Test

📖 Strict Transport Security

HTTP Strict Transport Security (HSTS): 🟠 HTTP 헤더가 'Strict-Transport-Security'로 설정되어 있습니다.

🛠 Check HSTS preload status and eligibility

📖 HTTP Strict Transport Security Cheat Sheet - OWASP

📖 Transport Layer Protection Cheat Sheet - OWASP

Cross Site Request Forgery (CSRF): 🔴 서버 측으로의 요청이 정당하며 우리 웹사이트/앱에서 시작되었음을 확인하여 CSRF 공격을 방지합니다.

📖 Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet - OWASP

Cross Site Scripting (XSS): 🔴 페이지나 웹사이트에 XSS 가능한 문제가 없습니다.

📖 XSS (Cross Site Scripting) Prevention Cheat Sheet - OWASP

📖 DOM based XSS Prevention Cheat Sheet - OWASP

Content Type Options: 🟠 Google Chrome이 서버에서 선언된 content-type과 다른 것을 시도하는 것을 방지합니다.

📖 X-Content-Type-Options - Scott Helme

X-Frame-Options (XFO): 🟠 방문자를 클릭잭킹 공격으로부터 보호합니다.

📖 클릭재킹이란 무엇이며 어떻게 방지합니까?

📖 X-Frame-Options - Scott Helme

📖 RFC7034 - HTTP Header Field X-Frame-Options

Content Security Policy: 🟠 웹사이트에서 콘텐츠가 어떻게 로드되는지 및 어디에서 로드되어 허용되는지를 정의합니다. 또한 클릭잭킹 공격에 대비하여 사용할 수 있습니다.

📖 Content Security Policy - An Introduction - Scott Helme

📖 CSP Cheat Sheet - Scott Helme

📖 CSP Cheat Sheet - OWASP

📖 Content Security Policy Reference

⬆ 페이지 상단으로 이동

성능

모범 사례

Goals to achieve: 🟠 페이지는 다음 목표를 달성해야 합니다:
- 첫 번째 의미 있는 페인트는 1초 이내에 완료되어야 합니다.
- "평균" 구성(느린 3G 네트워크에서 400ms RTT 및 400kbps 전송 속도를 갖는 $200 Android 장치)의 Time To Interactive는 5초 이내이어야 하며, 반복 방문에서는 2초 이내여야 합니다.
- 크리티컬 파일 크기는 압축 후 170KB 이내여야 합니다.

🛠 Website Page Analysis

🛠 WebPageTest

📖 Size Limit: Make the Web lighter

Minified HTML: 🟠 HTML은 압축되어 있습니다.
Lazy loading: 🟠 이미지, 스크립트 및 CSS는 현재 페이지의 응답 시간을 개선하기 위해 레이지 로딩되어야 합니다. (해당 섹션에서 자세한 내용 참조)
Cookie size: 🟠 쿠키를 사용하는 경우 각 쿠키가 4096바이트를 초과하지 않도록하고 도메인 이름에 20개 이상의 쿠키가 없도록합니다.

📖 Cookie specification: RFC 6265

📖 Cookies

🛠 Browser Cookie Limits

Third party components: 🟠 가능한 경우, 외부 자바스크립트에 의존하는 써드파티 iframe이나 구성 요소(공유 버튼과 같은)는 정적 구성 요소로 대체하여 외부 API 호출을 제한하고 사용자의 활동을 보호합니다.

🛠 Simple sharing buttons generator

다가오는 요청 준비하기

📖 Explanation of the following techniques

DNS resolution: 🟢 제공될 수 있는 필요한 제3자 서비스의 DNS는 dns-prefetch를 사용하여 유휴 시간 동안 미리 해결됩니다.

<link rel="dns-prefetch" href="https://example.com">

Preconnection: 🟢 빠른 접속을 위해 필요한 서비스와의 DNS 조회, TCP 핸드셰이크 및 TLS 협상은 유휴 시간 동안 preconnect를 사용하여 미리 처리됩니다.

<link rel="preconnect" href="https://example.com">

Prefetching: 🟢 빠른 접속을 위해 필요한 리소스(예: 지연로드된 이미지)는 유휴 시간 동안 prefetch를 사용하여 미리 요청됩니다.

<link rel="prefetch" href="image.png">

Preloading: 🟢 현재 페이지에서 필요한 리소스(예: <body> 끝에 배치된 스크립트)는 preload를 사용하여 미리 로드됩니다.

<link rel="preload" href="app.js">

📖 Difference between prefetch and preload

성능 테스트

Google PageSpeed: 🔴 모든 페이지(홈페이지뿐만 아니라)가 테스트되었으며 적어도 90/100의 점수를 받았습니다.

🛠 Google PageSpeed

🛠 Test your mobile speed with Google

🛠 WebPagetest - Website Performance and Optimization Test

🛠 GTmetrix - Website speed and performance optimization

🛠 Speedrank - Improve the performance of your website

⬆ 페이지 상단으로 이동

접근성

참고: A11ycasts with Rob Dodson 재생 목록을 시청할 수 있습니다. 📹

모범 사례

Progressive enhancement: 🟠 주요 기능인 주 메뉴 및 검색은 자바스크립트를 사용하지 않고도 작동해야 합니다.

📖 Enable / Disable JavaScript in Chrome Developer Tools

Color contrast: 🟠 색 대비는 적어도 WCAG AA를 통과해야 합니다 (모바일의 경우 AAA).

🛠 Contrast ratio

Headings

H1: 🔴 모든 페이지에는 웹 사이트 제목이 아닌 H1이 있습니다.
Headings: 🔴 Headings은 적절하게 사용되고 올바른 순서로 (H1에서 H6까지) 사용되어야 합니다.

📹 Why headings and landmarks are so important -- A11ycasts #18

시맨틱스

Specific HTML5 input types are used: 🟠 모바일 기기에서 각 요소의 유형에 따라 사용자 지정된 키패드와 위젯이 표시됩니다.

📖 Mobile Input Types

폼

Label: 🔴 각 입력 폼 요소에는 레이블이 연결되어 있습니다. 레이블을 표시할 수 없는 경우에는 대신 aria-label을 사용하세요.

📖 Using the aria-label attribute - MDN

접근성 테스트

Accessibility standards testing: 🔴 페이지가 접근성 표준을 준수하는지 테스트하기 위해 WAVE 도구를 사용하세요.

🛠 Wave testing

Keyboard navigation: 🔴 사용자가 키보드만 사용하여 웹사이트의 모든 상호 작용 가능한 요소가 예측 가능한 순서로 접근 가능하고 사용 가능한지 확인하세요.
Screen-reader: 🟠 모든 페이지가 스크린 리더(보이스오버, ChromeVox, NVDA 또는 Lynx)에서 테스트되었습니다.
Focus style: 🔴 포커스가 비활성화된 경우, CSS에서 visible 상태로 대체됩니다.

📹 Managing Focus - A11ycasts #22

⬆ 페이지 상단으로 이동

SEO

Google Analytics: 🟢 구글 애널리틱스가 설치되어 있고 올바르게 구성되었습니다.

🛠 Google Analytics

🛠 GA Checker (and others)

Search Console: 🟢 서치 콘솔이 설치되어 있고 올바르게 구성되었습니다. 이것은 Google에서 제공하는 무료 서비스로, Google 검색 결과에서 사이트의 존재를 모니터링, 유지 및 문제 해결하는 데 도움을 줍니다.

🛠 Search Console

Headings logic: 🟠 Heading 텍스트가 현재 페이지의 내용을 이해하는 데 도움이 됩니다.

🛠 Tota11y, tab Headings

sitemap.xml: 🔴 sitemap.xml이 있으며 구글 검색 콘솔(이전에는 구글 웹마스터 도구)에 제출되었습니다.

🛠 Sitemap generator

robots.txt: 🔴 robots.txt가 웹페이지를 차단하지 않습니다.

📖 The robots.txt file

🛠 Test your robots.txt with Google Robots Testing Tool

Structured Data: 🔴 구조화된 데이터를 사용하는 페이지는 테스트되었고 오류가 없습니다. 구조화된 데이터는 크롤러가 현재 페이지의 콘텐츠를 이해하는 데 도움이 됩니다.

📖 Introduction to Structured Data - Search - Google Developers

📖 JSON-LD

📖 Microdata

🛠 Test your page with the Rich Results Test

🛠 Complete list of vocabularies that can be used as structured data. Schema.org Full Hierarchy

Sitemap HTML: 🟠 HTML 사이트맵이 제공되며 웹사이트의 푸터에 있는 링크를 통해 접근할 수 있습니다.

📖 Sitemap guidelines - Google Support

⬆ 페이지 상단으로 이동

참고

thedaviddias/Front-End-Checklist

⬆ 페이지 상단으로 이동

저작자표시

'번역' 카테고리의 다른 글

리덕스로 모달 상태 제어하기 [번역] (0)	2022.06.10
리액트로 채팅 프론트엔드 구축하기 [번역] (2)	2022.05.31

Devvvvvv

프론트엔드 체크리스트 [번역]

프론트엔드 체크리스트

프론트엔드 체크리스트는 웹사이트나 HTML 페이지를 프로덕션에 출시하기 전에 가져야 할 모든 요소 및 테스트 항목을 상세하게 나열한 목록입니다.

사용 방법

Head

메타 태그

HTML 태그

HTML

모범 사례

HTML testing

웹폰트

CSS

성능

CSS 테스트

이미지

모범 사례

자바스크립트

모범 사례

자바스크립트 테스트

보안

웹 사이트 스캔 및 체크

모범 사례

성능

모범 사례

다가오는 요청 준비하기

성능 테스트

접근성

모범 사례

Headings

시맨틱스

폼

접근성 테스트

SEO

참고

'번역' 카테고리의 다른 글

티스토리툴바

프론트엔드 체크리스트 [번역]

프론트엔드 체크리스트

프론트엔드 체크리스트는 웹사이트나 HTML 페이지를 프로덕션에 출시하기 전에 가져야 할 모든 요소 및 테스트 항목을 상세하게 나열한 목록입니다.

사용 방법

Head

메타 태그

HTML 태그

HTML

모범 사례

HTML testing

웹폰트

CSS

성능

CSS 테스트

이미지

모범 사례

자바스크립트

모범 사례

자바스크립트 테스트

보안

웹 사이트 스캔 및 체크

모범 사례

성능

모범 사례

다가오는 요청 준비하기

성능 테스트

접근성

모범 사례

Headings

시맨틱스

폼

접근성 테스트

SEO

참고

'번역' 카테고리의 다른 글

관련글

티스토리툴바