HTML 모범 사례 [폐쇄

https://stackoverflow.com/questions/275631

07-07-2019
|

문제

거기 있습니다 <meta> 태그 및 기타에 배치 할 수 있습니다 <head> HTML 문서의. 뭐 <meta> 태그 등과 모범 사례는 HTML 문서에 사용하여보다 액세스 가능하고 검색 가능하며 최적화 된 등을 제공합니까?

해결책

나의 경우에는:

제목 (더 나은 SEO를 위해 [섹션 이름 - 사이트 이름]해야합니다)
메타 태그 Content-type, description, 그리고 keywords
스타일 시트에 링크 (S)를 지정하는 것을 잊지 마십시오. media="").
<script> 외부 JavaScript 파일에 연결되는 태그.

모든 태그는 W3C 표준을 따라야합니다. W3C 사이트에는보다 기술적이고 상세합니다 부분 HTML에 대해 <head> 부분.

다른 팁

사용자에게 호의를 베풀고 IE 엔진 스위치를 Chrome으로 전환하십시오. 크롬 프레임 설치됩니다 :)

<meta http-equiv="X-UA-Compatible" content="chrome=1">

신체 요소가 닫히기 전에 페이지 끝에 스크립트 요소를 넣고 싶을 것입니다. 보다 http://developer.yahoo.com/performance/rules.html#js_bottom 자세한 내용은.

일반적인 DocType, Title 등 외에도, 나는 당신에게 도움이 될 수있는 몇 가지를 배웠고 구현 한 것들을 제공 할 것입니다.

첫째, 최상의 사용자 경험을 위해 제목은 가장 관련성이 높은 하위 섹션이 있어야합니다. 일반적으로 제목 표시 줄/탭 목록/북마크 이름에 표시되기 때문입니다. 이 페이지 제목을 고려하십시오 ...

Stack Overflow - HTML head best practices

스택 오버플로가됩니다 ...

이제 5 개의 stackoverflow 탭이 열려 있다면 (내가 자주하는 것처럼 : p) 사용자는 어느 것이 어느 것을 알 수 있습니까?

또한 CSS와 함께 계단식 특성에 주목하십시오. 따라서 이것의 순서가 중요합니다. JavaScript와 동일하게 다른 외부 사이트에 대한 모든 의존성을 허용해야합니다. 나는 내 머리에 내 것을 넣었고 성능이 감소한 것을 보지 못했습니다. 나에게 더 깔끔하고 논리적으로 보이기 때문에 나는 그것들을 거기에 두었다. 다른 사람들은 다음을 추천 할 것입니다 <script src=""> 직전에 링크 </body> 따라서 브라우저는 일시적으로 정지하지 않습니다 ... 사이트에 가장 적합한 것을 사용하십시오.

또한 '일반적인'순 필터링 소프트웨어를 사용한 '등급'의 메타 태그는 귀하의 사이트가 모든 연령대의 시청자에게 안전하다는 것을 알려줍니다 (물론!)

나도 ..

<link rel="start" href="/" title="Home" />

내 사이트의 집이 어디에 있는지 브라우저에 알리기 위해. 브라우저 프리 페치 시스템의 경우 플러그인의 도움없이 브라우저에서 아직 구현되지 않았다고 생각합니다.

또한 '다음'과 '이전'을 고려하십시오. <link rel=""> 귀하의 페이지가 일종의 종류 인 경우.

먼저 <! doctype가 문서의 첫 번째 요소, 즉 공간, 탭 또는 손상된 BOM 마커인지 확인하십시오.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!-- declare all page rendering and programmatic related tags -->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- Care about IE ? -->
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <!-- globalise scripting and styling content language  -->
    <meta name="Content-Type-Script" content="text/javascript" />
    <meta name="Content-Type-Style" content="text/css" />
    <!-- title tag is MANDATORY -->
    <title>Short and relevant, about 64 characters/spaces</title>
    <!-- declare all CACHE controll -->
    <meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
    <meta name="revisit-after" content="7 days" />

    <!-- declare all content description tags -->
    <meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.gcf.org/v2.5" labels on "1994.11.05T08:15-0500" until "1995.12.31T23:59-0000" for "http://w3.org/PICS/Overview.html" ratings (suds 0.5 density 0 color/hue 1))'>
    <!-- language specific keywords -->
    <meta name="keywords" lang="en-us" content="vacation, Greece, sunshine" />
    <!-- For french example -->
    <meta name="keywords" lang="fr" content="vacances, Grèce, soleil" />
    <meta name="description" content="about 255 characters/spaces WORDS relevant to the content of the actual page" />
    <meta name="Abstract" content="about 96 characters/spaces PARAGRAPH describing the actual page content within your site" />

    <!-- declare all situationnal and external relativity related tags -->
    <link rel="DC.identifier" type="text/plain" href="http://www.ietf.org/rfc/rfc1866.txt" />
    <link rel="start" href="/" title="Home" />
    <link rel="prev" href="../" title="Parent section" />

    <!-- declare all page rendering cascading style sheets in order of incidence -->
    <link rel="stylesheet" type="text/css" href="globaly-used.css" />
    <link rel="stylesheet" type="text/css" href="specificly-used.css" />
    <!-- declare all page rendering specific cascading style i.e. IE only, hacks etc -->
    <link rel="stylesheet" type="text/css" href="more-specificly-used.css" />
    <link rel="stylesheet" type="text/css" href="i-love-ie.css" />

    <!-- not relevent to subject, declare all javascripts AFTER css linking -->

</head>
<body>
</body>
</html>

나는 이것을 언급하지 않았다 : <base> 지정된 경우 태그는 첫 번째 요소 여야합니다. <head>. (문서의 기본 URI는 . 이전/지정되지 않은 경우.)

IMHO, 가장 중요한 두 아동 태그 <head> ~이다 <title> 그리고 컨텐츠 유형 메타 태그. 검색 엔진이 적극적으로 살펴 봅니다 <title>. 반면 다른 메타 태그는 종종 무시됩니다. 다국어 웹 사용자로서 - 브라우저가 웹 페이지의 문자 세트를 자동으로 설정해야 하며이 작업이 종종 벗겨지기 때문에 콘텐츠 유형 태그를 추가하는 것의 중요성을 더 강조 할 수 없습니다. 결과는 다양한 캐릭터가 사용자에게 올바르게 렌더링되지 않거나 일본어 또는 중국어의 경우 때로는 전혀 전혀 없습니다.

다음은 현재 내 프로젝트의 헤더 코드의 스 니펫입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Reports Blah Blah</title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
...
</head>

관련 질문이 있습니다 여기 그것은 태그의 순서와 관련하여 약간의 빛을 추가하는 데 도움이 될 수 있습니다.

일반적으로 내 페이지에는 다음이 포함됩니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>...</title>
    <meta name="Description" ...>
    <meta name="Keywords" ...>
    <meta name="Copyright" ...>
    <meta name="Author" ...>
    <meta name="Language" ...>
    <style type="text/css" ...>

나는 그것이 메타 태그가 먼저 나오는 많은 차이 또는 제목이 위에 있는지 여부를 많이 생각하지 않습니다. 대부분의 경우 중요한 것은 페이지에 존재하고 올바른 콘텐츠를 가지고 있다는 것입니다.

내가 아는 한, 대부분의 검색 엔진은 "키워드"또는 "설명"메타 태그를 무시하고 대신 문서의 내용을 읽는 것을 선호합니다.

그러나 페이지 제목을 올바르게 얻는 것이 매우 중요합니다.

키워드에 대한 제목, 메타 태그, 콘텐츠 유형 (웹 서버에서 명시 적으로 설정하지 않은 경우) 및 페이지에 적용 할 CSS.

CSS를 앞쪽으로 선언하면 브라우저가 페이지를보다 효율적으로 배치 할 수 있습니다 ( http://developer.yahoo.com/performance/rules.html#css_top).

중요한 메모를 추가하겠습니다. 즉 meta X-UA-Compatible 렌더링 모드를 스위치하기위한 태그 Interet Explorer의 경우 첫 번째 항목으로 삽입해야합니다.

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <title>Page title</title>
  ...etc
</head>

위의 답변 외에도 사용합니다 더블린 핵심 이니셔티브 메타 태그.

실제 콘텐츠/논문 등에 매우 유용합니다.

<meta name="DC.abstract" content="Document abstract" />
<meta name="DC.audience" content="Target audience" />

등.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow