SEO의 목적 상, 순서가 중요하지 않다는 것은 사실 일 수 있지만, 보안, 컨텐츠 (문자) 표시 또는 로딩 속도와 같은 다른 것을 고려할 때는 사실이 아닙니다. 따라서 페이지 헤드를 대략적으로 주문하는 것이 좋습니다 (구문으로 HTML5를 가정).
<head>
지금까지는 비 ASCII 문자를 사용하지 않았으므로 문자 인코딩은 아직 문제가되지 않습니다. 그러나 헤드 태그를 열면 비 ASCII 문자를 사용할 가능성이 크게 높아집니다. 따라서 프로그래밍 방식으로 또는 서버 수준에서 문자 인코딩을 선언하지 않는다고 가정하면 다음 명령문을 문자 인코딩 선언으로 만들어야합니다. 또한 문자 인코딩 명령문에 대해 스니핑 할 파서 / 브라우저 / 에이전트도 만족합니다.
<meta charset="utf-8">
다음 두 가지 ( X-UA-Compatible
및 viewport
)는 Bootstrap의 사람들이 권장합니다 (최근 v3.3.4). 이러한 권장 사항이 성능을 기반으로한다는 점에 거의 긍정적이지만, 내가 말하고자하는 대부분의 내용은 추론입니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
장치에 구애받지 않는 디자인 / 개발에 대해 생각하고 있다면 (데스크톱이 아닌 소규모 사용자 에이전트 포함) 다음을 포함해야합니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
마지막으로 제목 :
<title>Ingenious Page Title</title>
다음으로 가능한 한 빨리 타이틀 바로 뒤에 CSS를 제공합니다 (그들 사이에 '일광'없음).
<link rel="stylesheet" href="stylesheet-1.css">
<link rel="stylesheet" href="stylesheet-2.css">
페이지 수준 스타일을 사용하는 경우 여기로 이동합니다. 이는 CSS의 '계단식'특성, 즉 동일한 수준의 특이성 (예 : 단락을 대상으로하는 두 문장)의 마지막 스타일 선언 때문입니다 p
. 외부 스타일을보다 쉽게 재정의하려면 (예 : 더 큰 특이성을 사용하지 않거나 !important
) 외부 스타일 뒤에 페이지 수준 스타일을 배치해야합니다 <link>
. 또한 일반적으로 페이지 스타일에서 @import 지시문을 사용하는 것은 바람직하지 않습니다. 다른 스타일 자산의 동시 다운로드를 방해하기 때문입니다.
<style>body{color:black;}</style>
이것은 메타 태그, 파비콘 및 기타 부스러기를 넣는 것이 가장 적절한 시점입니다. 파비콘이나 유사한 자산 (예 : iOS 앱 이미지)은 대부분의 메타 태그보다 먼저로드 될 것입니다. 그 자산의 다운로드가 조금 더 빨리 시작 되었기 때문입니다.
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-icon.png">
<meta name="description" content="Some information that is descriptive of the content">
<meta name="generator" content="Microsoft FrontPage 2002">
렌더링을 차단 / 지연하기 때문에 스크립트가 필요한 경우 합리적으로 늦게로드하십시오. 이 안에 있어야하는 경우 ( )를 head
닫기 전에로드 할 수 있습니다 . 나중에로드 할 수 있으면 태그를 닫기 전에 놓으십시오 ( ).head
</head>
body
</body>
<script src="script-1.js"></script>
<script src="script-2.js"></script>
</head>
인덱싱 봇 (예 : 검색 엔진 스파이더)이 전체 페이지를 사용한다는 점을 감안하면 SEO 목적을 위해 메타 태그의 순서에 많은주의를 기울이는 것이 중요하지 않은 것 같습니다. 그렇지 않으면 어떻게 페이지의 컨텐츠를 색인화하거나 나중에 해당 색인을 업데이트합니까?
우리가 알고 있다고 생각하는 모든 것과 웹에서 찾은 모든 권장 사항 (Google 및 Bing 웹 마스터 도구 등), 아마존, Google 및 명확하게 신경 쓰는 다른 사람들과 같은 사이트에 대해 주목할 만합니다. 이러한 미미한 성능 향상에 대해서는 이러한 규칙을 따르지 않습니다.