HTML 메타 태그의 순서


16

서구 회사는 우리가 우리의 HTML 메타 태그의 순서를 변경 제안 <title>하고 <meta name="description">처음 두를 수 있습니다. 그들은 이것이 검색 엔진이이 두 태그를 활용할 수 있도록하기위한 것이라고 말합니다. 문서 헤드 내부의 태그 순서가 중요하지 않다는 인상을 받았습니다. 내가 틀렸어? 정말 처음 두 태그는 항상 가정 엔진 검색 있는가 titledescription그들이하지 않은 경우 그들을 찾고 포기를?


답변:


15

당신이 올바른지. 이러한 태그의 순서는 SEO에 중요하지 않습니다. 그들은 단지 존재해야합니다. 누구든지 그것이 명백한 단서가 아니라고 말했다 (물론 SEO 비즈니스를 운영하고있다. Sigh).


소스 또는 사례 연구를 제공 할 수 있습니까?
s_hewitt

3
경험에 근거한 의견. 다음은 주제에 관한 SearchEngineWatch 토론입니다-순서는 중요하지 않습니다 : forums.searchenginewatch.com/showthread.php?t=16452
Ciaran

7

SEO의 목적 상, 순서가 중요하지 않다는 것은 사실 일 수 있지만, 보안, 컨텐츠 (문자) 표시 또는 로딩 속도와 같은 다른 것을 고려할 때는 사실이 아닙니다. 따라서 페이지 헤드를 대략적으로 주문하는 것이 좋습니다 (구문으로 HTML5를 가정).

<head>

지금까지는 비 ASCII 문자를 사용하지 않았으므로 문자 인코딩은 아직 문제가되지 않습니다. 그러나 헤드 태그를 열면 비 ASCII 문자를 사용할 가능성이 크게 높아집니다. 따라서 프로그래밍 방식으로 또는 서버 수준에서 문자 인코딩을 선언하지 않는다고 가정하면 다음 명령문을 문자 인코딩 선언으로 만들어야합니다. 또한 문자 인코딩 명령문에 대해 스니핑 할 파서 / 브라우저 / 에이전트도 만족합니다.

  <meta charset="utf-8">

다음 두 가지 ( X-UA-Compatibleviewport)는 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 및 명확하게 신경 쓰는 다른 사람들과 같은 사이트에 대해 주목할 만합니다. 이러한 미미한 성능 향상에 대해서는 이러한 규칙을 따르지 않습니다.


Apple 터치 아이콘은 2010 년에도 여전히 상대적으로 새로운 반면 X-UA-Compatible, viewport모두 사용되었습니다. HTML5는 문자셋 선언의 길이에만 영향을 미쳤다. CSS, JS 및 이미지 파이프 라이닝은 CSS와 JS를 적용한 후 페이지를 다시 렌더링하는 것뿐만 아니라 당시 문제였습니다. 그럼에도 불구하고, 나는이 정보를 한 곳에서 찾을 수 없었습니다 ( headhtml 문서 이외의 곳 ).이 질문을 우연히 만난 후에는 여기에서하는 것이 좋았습니다.
David Eldridge

좋은 답변 @DavidEldridge. 그러나 application/ld+json구조화 된 데이터에 대한 스크립트 를 포함하도록 답변을 업데이트 하시겠습니까? 속도를 위해. 어디에 두는 것이 가장 좋을까요? 외부 JavaScript파일 로 취급해야합니까 ?
Brendan Vogt 2012 년

2

기능적인 관점에서 Bootstrap의 다음은 메타 태그보다 나은 순서 인 것 같습니다.

    1) <meta charset="utf-8">
    2) <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    3) <title></title>
    4) <meta name="description" content="">
    5) <meta name="viewport" content="width=device-width, initial-scale=1">

구글 직원에 따르면 SEO에 중요한 것은

  1. 모바일 친화적
  2. 제목과 설명
  3. 독특하고 가치있는 콘텐츠

사이트가 모바일 친화적이지 않으면 2) 또는 3)도 보지 않습니다. 모바일 친화적이라면 사이트를 나열 할 때 제목과 설명을 사용할 수 있습니다. 그에 대한 보장은 없습니다. 그들은 귀하의 사이트에서 찾은 내용에 따라 자신의 설명을 제시하기로 결정할 수 있습니다.

콘텐츠가 표절되거나 반복적이며 키워드로 가득 채우거나 다른 'BlackHat'기술을 사용하려고하면 그러한 일로 인해 상처를 입거나 금지 될 수 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.