좋은 index.html 파일을 작성하는 방법
모든 웹 개발자가 거기에있었습니다 : 당신은 새로운 프로젝트를 시작하고 빈 파일을 쳐다보고 있습니다. index.html
. 당신은 어떤 태그가 again? Which are the meta tags that are best practice, and which ones are deprecated?
Recently, I found myself in this exact situation. My first instinct was to copy the head section from a previous project, but as I reviewed the code, I realized some tags were outdated or simply didn’t apply to my new project. What followed was a deep dive into HTML head tags — which ones are essential, which are optional, and which are just cluttering my code.
If you’re in a hurry and just want the template, you can find my complete starter template on GitHub. The repository contains two main files:
index.html
: 필요하고 불필요한 추가 기능이없는 깨끗하고 미니멀리스트 템플릿.index-commented.html
: 동일한 템플릿이지만 각 태그를 사용해야하는 방법과 이유를 설명하는 자세한 주석이 있습니다.
이 기사는 본질적으로 index-commented.html
파일, 템플릿에서 내린 각 결정에 대한 더 많은 컨텍스트 및 설명을 제공합니다.
이 템플릿은 현재 모범 사례를 조사한 후에 대한 의견이있는 접근 방식을 나타냅니다. 우수한 성능, 접근성 및 검색 엔진 최적화를 유지하면서 대부분의 웹 프로젝트의 견고한 기초가되는 것을 목표로합니다.
잘 구조화 된 HTML 헤드의 필수 구성 요소로 뛰어 들어 봅시다.
포함 해야하는 태그
이 태그는 거의 모든 HTML 문서에 있어야합니다. 적절한 렌더링, SEO 및 접근성에 필수적입니다.
and lang="en"
: 문서 유형과 언어 설정
lang="en"
: 문서 유형과 언어 설정DocType 선언으로 항상 HTML 문서를 시작하십시오. 이를 통해 브라우저에 사용중인 HTML 버전 (이 경우 HTML5)을 알려주고 일관된 렌더링을 보장하는 데 도움이됩니다. 그만큼 lang
속성 tag specifies the language of your page – this is crucial for screen readers, search engines, and browsers. If your content is in a different language, change the code accordingly (e.g.,
lang="es"
스페인어).
: 페이지 제목
모든 HTML 문서에는 제목 태그가 있어야합니다. 이 텍스트는 브라우저 탭, 북마크 및 검색 엔진 결과에 나타납니다. 타이틀을 설명하지만 간결하게 60 자 미만으로 만드십시오. 좋은 제목은 모두 페이지 콘텐츠에 대해 알려주고 SEO와 관련된 키워드를 포함합니다.
: 반응 형 디자인을위한 뷰포트 구성
오늘날의 모바일 우선 세계 에서이 메타 태그는 협상 할 수 없습니다. 모바일 브라우저에 페이지의 크기 및 스케일링을 제어하는 방법을 알려줍니다. 각 매개 변수가하는 일을 분류합시다.
viewport-fit=cover
: 컨텐츠가 디스플레이의 가장자리까지 확장되도록합니다 (특히 노치 전화에 중요 함)width=device-width
: 장치의 화면 너비를 따라 페이지 너비를 설정합니다.initial-scale=1.0
: 페이지가 처음로드 될 때 초기 줌 레벨을 설정합니다.minimum-scale=1.0
: 사용자는 사용자가 너무 많이 확대되지 않도록합니다maximum-scale=5.0
: 사용자는 최대 5 배까지 확대 할 수 있습니다 (이를 제한하면 접근성에 해를 끼칠 수 있습니다)
이 태그가 없으면 모바일 장치는 일반적인 데스크탑 화면 너비로 페이지를 렌더링 한 다음 스케일로 낮추어 읽을 수없는 텍스트가 작고 사용자가 확대 / 축소 및 PAN을 강제합니다.
,,,
,,,
: 필수 메타 정보
이 메타 태그는 귀하의 페이지에 대한 중요한 정보를 제공합니다.
description
: 페이지 컨텐츠에 대한 간결한 요약 (이상적으로 150-160 자). 이것은 종종 제목 아래 검색 엔진 결과에 나타납니다.keywords
: 페이지 컨텐츠와 관련된 키워드. 요즘 Google에는 덜 중요하지만 다른 검색 엔진과 크롤러는 여전히이 정보를 사용할 수 있습니다.author
: 페이지를 만든 개인 또는 조직의 이름.
이 태그는 페이지 렌더링에 직접적인 영향을 미치지 않지만 SEO 및 컨텐츠 분류에 유용합니다.
: 중복 인덱스를 피합니다
이 태그는 검색 엔진이 다른 URL을 통해 액세스 할 수있을 때 동일한 콘텐츠에 여러 번 인덱스를 피하는 데 도움이됩니다. 예를 들어, 여러 URL을 통해 페이지에 액세스 할 수있는 경우 example.com/page
그리고 example.com/page/index.html
), 표준 태그는 검색 엔진에 어떤 URL이 인덱스 할 “공식적인”버전인지를 지시하여 검색 순위에 해를 끼칠 수있는 중복 인덱스를 방지합니다.
채우십시오 href
검색 엔진 이이 컨텐츠와 연결하려는 기본 URL의 속성.
CSS 로딩 전략 : 중요한 인라인 CSS 대 외부 스타일 시트
CSS 로딩을위한이 전략은 두 가지 방법으로 성능을 최적화합니다.
- 인라인 중요한 CSS: HTML 문서에 필수 스타일을 직접 포함시켜 렌더링을 차단할 추가 네트워크 요청을 피하십시오. 이로 인해 중요한 스타일은 컨텐츠 이후로드 할 때 발생할 수있는 재 스타일 컨텐츠 (FOUC)의 플래시를 방지합니다.
- 비정규 CSS에 대한 비동기 적재: OnLoad 핸들러가 장착 된 예압 기술을 사용하면 기본 스타일 시트가 렌더링을 차단하지 않고로드 할 수 있습니다. 이는 나머지 스타일이 여전히로드되는 동안 페이지가 표시되기 시작하여 더 나은 사용자 경험을 만듭니다. noscript 태그는 JavaScript 비활성화 된 사용자에게 폴백을 제공합니다.
또는 사이트가 주름 이상으로 중요한 스타일 요구가 없으면 더 간단한 접근 방식을 사용할 수 있습니다.
이는 더 간단하지만 콘텐츠를 표시하기 전에 브라우저가 CSS를 다운로드하여 구문 분석해야하므로 초기 렌더링 속도를 늦출 수 있습니다.
: Script loading best practices
For JavaScript, the type="module"
attribute offers several advantages:
- Automatically defers script loading until the DOM is ready
- Enables ECMAScript modules for better code organization
- Runs in strict mode by default
- Allows for cleaner dependency management
async
attribute:
Additionally, it’s good practice to register a service worker for offline capabilities:
이 스크립트는없이 배치됩니다 defer
또는 async
속성은 가능한 빨리로드 및 실행되므로 페이지로드 프로세스 초기에 오프라인 기능이 가능합니다. 서비스 작업자는 웹 페이지와 무관하게 백그라운드에서 실행되므로 사용자가 사이트에서 멀리 떨어진 경우에도 네트워크 요청 및 캐싱을 처리 할 수 있습니다.
당신이 포함해야 할 태그
이 태그는 모든 프로젝트에 필요한 것은 아니지만 특정 상황에서는 가치가 있습니다. 프로젝트의 요구에 따라 포함하십시오.
: 캐릭터 인코딩
이 메타 태그는 HTML 문서의 문자 인코딩을 지정합니다. UTF-8은 이미 HTML5에서 기본 문자 인코딩 이므로이 태그는 많은 경우에 엄격하게 필요하지 않습니다. 그러나 IT를 포함하여 모든 브라우저에서 일관성을 명시 적으로 보장하고 특히 특수 문자 또는 라틴이 아닌 알파벳으로 잠재적 인 캐릭터 렌더링 문제를 방지합니다.
: 기본 URL 정의
기본 태그는 문서의 모든 상대 URL에 대한 기본 URL을 지정합니다. 모든 사이트의 URL이 이미 루트 경로와 관련이있는 경우 ( “이 태그를 포함 할 필요가 없습니다. 주로 사이트가 하위 디렉토리에서 호스팅 될 때 유용하지만 경로가 도메인 루트와 관련이 있거나 클라이언트 측 라우팅을 사용하여 단일 페이지 응용 프로그램을 개발할 때 경로를 원합니다.
: 응용 프로그램 세부 사항
PWA (Progressive Web App)의 제목 태그에 지정된 이름과 다른 이름이 있어야하는 경우이 메타 태그를 사용하십시오. 웹 애플리케이션이 장치에 설치되거나 사용자의 시작 메뉴 또는 작업 표시 줄에 고정 될 때 나타나는 이름을 정의합니다.
: 브라우저 UI 테마 색상
이 메타 태그는 모바일 브라우저의 브라우저 주소 표시 줄이나 일부 데스크탑 브라우저의 제목 표시 줄과 같이 페이지 주변의 UI 요소에서 사용자 에이전트가 사용하는 색상을 정의합니다. 보다 통합 된 시각적 경험을 만들기 위해 브랜드 아이덴티티를 반영하는 색상을 선택하십시오.
: 밝고 어두운 모드 지원
이 태그는 사이트가 라이트 모드, 다크 모드 또는 둘 다를 지원하는 경우 브라우저에 알려줍니다. 가치 "light dark"
두 체계가 모두 지원되며 빛이 선호됩니다. 이를 통해 브라우저는 적절한 색상 구성표에서 형태 제어, 스크롤 바 및 기타 UI 요소를 렌더링하여 시스템 환경 설정과 관련된 더 나은 사용자 경험을 만듭니다.
: Open Graph와 소셜 미디어 통합
그래프 메타 태그 열기 Facebook, LinkedIn 및 X (이전의 Twitter)와 같은 소셜 미디어 플랫폼에서 공유 할 때 콘텐츠가 나타나는 방식을 최적화하십시오. 기본 기능에 필수적인 것은 아니지만 공유시 콘텐츠의 외관과 참여를 크게 향상시킵니다.
주요 오픈 그래프 태그에는 다음이 포함됩니다.
og:title
: 페이지/콘텐츠의 제목 (HTML 제목과 다를 수 있음)og:type
: 콘텐츠 유형 (웹 사이트, 기사, 제품 등)og:url
: 페이지의 표준 URLog:image
: 컨텐츠를 나타내는 이미지의 URL
사이트의 콘텐츠가 소셜 플랫폼에서 공유 될 가능성이있는 경우 이러한 태그를 적절한 값으로 채우면 클릭률과 참여를 크게 향상시킬 수 있습니다.
그리고
: PWA 지원 및 파비콘
프로그레시브 웹 앱의 경우 매니페스트 링크를 사용하여 아이콘을 포함하여 앱의 메타 데이터가 포함 된 JSON 파일을 가리 키십시오. 매니페스트에는 앱의 아이콘이 다양한 장치와 컨텍스트에 대해 다양한 크기의 아이콘을 포함해야합니다.
PWA가 아닌 일반 웹 사이트의 경우 아이콘 링크를 사용하여 사이트의 Favicon을 정의하십시오. 기술적으로 선택 사항이지만 Favicon은 브랜드 인식 및 사용자 경험을 도와 주므로 대부분의 사이트에는 하나를 포함해야합니다.
: 사이트의 대체 콘텐츠 유형
이 링크 태그는 여러 목적을 제공합니다.
-
RSS 리더 및 기타 피드 어 그리 게이터가 사이트의 RSS 피드를 발견하는 데 도움이됩니다. 사이트가 RSS 피드 (블로그, 뉴스 사이트 또는 정기적으로 업데이트 된 컨텐츠 컬렉션)를 제공하는 경우 포함하십시오.
-
AN을 지정하는 데 사용될 수도 있습니다
llms.txt
귀하의 사이트에 대한 파일은 atype="text/markdown"
대체 링크. 이 파일은 사이트의 컨텐츠를 사이트를 스캔하는 대형 언어 모델에 대해 소화하기 쉬운 형식으로 제공합니다. 메모: 나는 Giles Thomas로부터 그 생각을 훔쳤다.
사이트에서 이러한 기능을 제공하지 않으면 이러한 태그를 안전하게 생략 할 수 있습니다.
,,,
,,,
: 리소스 최적화
이 링크 태그는 리소스로드를 최적화하는 데 도움이됩니다.
preload
: 브라우저에 최대한 빨리 리소스를 다운로드하고 캐시하도록 지시합니다. 글꼴이나 중요한 이미지와 같은 렌더링 프로세스 초기에 필요한 중요한 리소스에 유용합니다.preconnect
: 나중에 자원을 가져 오는 외부 도메인과 초기 연결을 설정합니다. 필요할 때 연결을 준비하여 시간을 절약합니다.prefetch
: 브라우저에 향후 내비게이션에 자원이 필요할 수 있다고 제안합니다. 브라우저는 유휴 상태에서 다운로드하여 후속 페이지로드가 더 빨라집니다.
성능 요구에 따라 선택적으로 사용하십시오. 그것들을 과도하게 사용하면 대역폭을 낭비 할 수 있으므로 진정으로 중요한 자원에 집중하십시오.
결론
이 템플릿은 모든 웹 프로젝트에 대한 확실한 시작점을 제공합니다. 물론,이 템플릿은 완전히 의견이 있으며 요구에 가장 적합한 설정은 다를 수 있습니다. 템플릿에서 일반적인 태그를 제외하면 적어도 대부분의 경우 필요하지 않기 때문일 수 있습니다.
나는 당신의 의견을 환영합니다! 내가 중요한 것을 놓쳤다 고 생각되면 문제를 열거나 Github 저장소에 풀 요청을 제출하십시오.
또한 index.html 파일보다 더 나아가는 스타터 템플릿을 원한다면 html5 보일러 플레이트를 확인할 수 있습니다. 프로그레시브 웹 앱을 구축 할 때 정말 빨리 달리기를하는 것은 훌륭한 자료입니다.
자원
HTML 헤드 태그에 대한 자세한 내용을 보려면 여기에서 시작하는 것이 좋습니다.
그리고 다시 한 번, 당신은 github에서 my index.html 템플릿을 찾을 수 있습니다.
Post Comment