>  기사  >  웹 프론트엔드  >  HTML의 메타 태그 사용법에 대한 자세한 설명

HTML의 메타 태그 사용법에 대한 자세한 설명

巴扎黑
巴扎黑원래의
2017-05-21 10:04:391711검색

다음은 html 메타 태그 사용에 대한 요약입니다(권장). 에디터가 꽤 좋다고 생각해서 지금 공유해서 참고용으로 올려보겠습니다. 에디터 따라가서 살펴볼까요

메타태그의 역할

META 태그는 HEAD 영역의 핵심 태그입니다. HTML 태그, 문서 문자 제공 컬렉션, 언어, 작성자 등의 기본 정보와 키워드, 웹 페이지 수준 설정 등은 검색 엔진 최적화(SEO)에 가장 유용합니다.

PS: 검색 엔진 로봇이 찾아서 분류하는 것이 편리합니다. 인터넷 애플리케이션은 이에 주의해야 합니다.

대규모 웹사이트에 글을 쓰는 방법은 무엇인가요?

이 태그를 이해하기 전에 다음과 같이 다양한 주류 웹사이트에서 메타 설정을 검색했습니다.

JD.com 홈페이지의 메타 설정:


XML/HTML 코드클립보드에 콘텐츠 복사

  1. <메타 문자 집합="gbk">

  2. <메타 이름="설명" 콘텐츠="JD.COM- 전문가 가전, 디지털통신, 컴퓨터, 생활백화점, 의류, 모자용품, 도서, 식품 등 수만 가지의 고품질 브랜드 상품을 판매하는 종합 온라인 쇼핑몰입니다. 즐거운 온라인 쇼핑을 경험하세요! >= "키워드" 콘텐츠

    =
  3. "온라인쇼핑, 온라인몰, 휴대폰, 노트북, 컴퓨터, MP3, CD, VCD, DV, 카메라, 디지털, 액세서리, 시계, 메모리 카드, Jingdong "
  4. >타오바오 홈페이지 메타 설정: XML/HTML 코드

    클립보드에 콘텐츠 복사

<


메타

문자 집합="utf-8">

  1. <메타 http-equiv="X-UA 호환" 콘텐츠

    =
  2. "IE=edge,chrome=1 "
  3. ><메타 이름= "렌더러" 콘텐츠

    =
  4. "webkit"
  5. ><메타 이름="spm-id" 콘텐츠

    =
  6. "a21bo"
  7. > <메타 이름="설명" 내용

    =
  8. "Taobao - 모든 종류의 의류, 뷰티, 홈, 디지털, 전화/포인트 카드 재충전을 제공하는 아시아 최대이자 가장 안전한 온라인 거래 플랫폼... 8억 개의 고품질 특별 제안 및 보장도 제공 거래(선접수, 후불), 사전 보상, 위조품에 대한 3대 1 보상, 7일 이내 이유 없는 반품 및 교환, 무료 디지털 유지 관리 및 기타 안전한 거래 보장 서비스를 통해 온라인의 즐거움을 마음껏 누릴 수 있습니다. 안심하고 쇼핑하세요! "
  9. ><메타 이름= "keyword" content

    =
  10. ""
  11. >youku 홈페이지 메타 설정 :XML/HTML 코드

    클립보드에 콘텐츠 복사
  1. <메타 문자 집합="utf-8">

  2. <메타 http-equiv="X-UA 호환" 콘텐츠="IE=Edge">

  3. <meta name="title" content="Youku - 비디오 재생, 비디오 게시 및 비디오를 제공하는 중국 최고의 비디오 웹사이트 검색 - Youku 비디오" />

  4. <메타 이름 ="키워드" 콘텐츠="동영상, 동영상 공유, 동영상 검색, 동영상 재생, Youku 동영상" />

  5. <메타 이름="설명" 콘텐츠 = "영상 재생, 영상 출판, 영상 검색, 영상 공유 등을 제공하는 영상 서비스 플랫폼" />

두유 홈 페이지의 메타 설정:


XML/HTML 코드클립보드에 콘텐츠 복사

  1. <메타 http-equiv="콘텐츠 유형" 콘텐츠= "text/html; charset=utf-8" />

  2. <meta 이름="렌더러" 콘텐츠="webkit|ie-comp|ie-stand">

  3. <meta http-equiv="X-UA 호환" 콘텐츠="IE=Edge,chrome=1">

  4. < ;메타 이름="키워드" 콘텐츠="DOTA2, 인기 게임 생방송, 게임 생방송 , 고화질 게임 생방송, 모바일 게임 생방송, e스포츠 생방송" />

  5. < 메타 이름="설명" 콘텐츠=" Douyu - 전국 생방송 플랫폼으로 고화질, 빠르고, 원활한 영상 라이브 방송 및 게임 이벤트 라이브 방송 서비스입니다. DOTA2 등 다양한 인기 게임 이벤트의 라이브 방송과 다양한 유명 게임 라이브 방송이 포함되어 있어 콘텐츠가 풍부하고 시기적절하게 푸시되어 색다른 시청각 경험을 선사합니다. 전국 생방송 플랫폼 Douyu에서 모두 만나보세요. " />

Tencent 홈페이지 메타 설정:


XML/HTML 코드클립보드에 콘텐츠 복사

  1. <메타 문자 집합="UTF-8">

  2. <meta 이름="렌더러" 콘텐츠="webkit" />

  3. <메타 http-equiv="X-UA 호환" 콘텐츠="IE=edge,chrome=1">

  4. <메타 이름="키워드" 콘텐츠="뉴스 뉴스센터 사실뉴스 채널, 시사보도">

  5. <메타 이름="설명" 콘텐츠="텐센트 뉴스, 사실입니다. 시사 뉴스, 국내 뉴스, 국제 뉴스, 사회 뉴스, 시사 논평, 뉴스 사진, 뉴스 주제, 뉴스 포럼, 군사, 역사를 포함한 뉴스 센터 , 전문 시사 보도 포털 ">

  6. <메타 이름 ="저자" 콘텐츠="skeetershi" />

Qidian Novel.com 홈페이지의 메타 설정:


XML/HTML 코드클립보드에 콘텐츠 복사

  1. <메타 이름="키워드" 콘텐츠 ="소설, 소설사이트, 로맨스소설, 청소년소설, 판타지소설, 무협소설, 도시소설, 역사소설, 온라인소설, 온라인문학원작" />

  2. <메타 이름="설명" 내용 ="소설읽기, 멋진소설은 모두 기전소설에 있습니다. 치전소설은 판타지소설, 무협소설, 원작소설, 온라인게임소설, 도시소설, 연애소설, 청소년소설, 역사소설, 군사소설, 온라인 게임 소설, SF 소설, 공포 소설, 첫 번째 소설의 최신 장 무료 소설 읽기, 모든 즐거움은 치디안 소설에 있습니다! " />

  3. . <메타 http-equiv="콘텐츠 유형" ID ="meta_ContentType" 콘텐츠="text/html;charset=UTF-8" />

  4. <메타 이름="로봇" 콘텐츠=" 모두" />

  5. <메타 이름="googlebot" 콘텐츠="모두" />

  6. < ; 메타 이름="baiduspider" content="all" /> ;

  7. <메타 이름="저작권" content="이 페이지 www.qidian.com의 저작권은 Qidian Chinese Network에 있습니다. All Rights Reserved" />

  8. <메타 http-equiv="mobile-agent" 콘텐츠="format=wml; url=http://m.qidian.com" /><메타 http-equiv="mobile-agent" 콘텐츠="format=xhtml; url=http://m.qidian.com" /><메타 http-equiv="mobile-agent"  콘텐츠="format=html5; url=http://h5.qidian.com/bookstore.html" />

  9. <메타 이름="application-name" content="起点中文小说网" /   

  10. <메타 이름="msapplication-starturl " 콘텐츠="/Default.aspx?_s=ie9" />

  11. <메타 이름="msapplication-tooltip" content="小说阅读_起点中文소형 ><

    메타
  12.  
  13. 이름

    ="msapplication-task" content="name=起点小游戏;action-uri=http://game.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/game.ico" /> ;<

    메타
  14.  
  15. 이름

    ="msapplication-task" 콘텐츠="name=藏书架;action-uri=http://me.qidian.com/BookCase/1/1?_s=ie9;icon-uri=http://www .qidian.com/Images/ie9/book.ico" /><

    메타
  16.  
  17. 이름

    ="msapplication-task" 콘텐츠="name=读书客户端;action-uri=http://c.qidian .com/android/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/phone.ico" /> <

    메타
  18.  
  19. 이름

    ="msapplication-task" 콘텐츠="name=排行榜;action-uri=http://top.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/chart.ico" /><

    메타
  20.  
  21. 이름

    ="msapplication -작업" 내용="name=搜索;action-uri=http://sosu.qidian.com/?_s=ie9;icon-uri=http://www .qidian.com/Images/ie9/search.ico" /><

    메타
  22.  
  23. 속성

    ="qc:admins" content="204236767661141166375" /> meta详解

meta标签可分为两大부分:http-equiv와 name变weight。http-equiv

http-equiv는 http의 파일 헤더와 동일하며 브라우저가 웹 페이지 콘텐츠를 올바르게 표시하는 데 도움이 되는 몇 가지 유용한 정보를 반환할 수 있습니다.

를 직접 사용하는 것입니다. >
설명
콘텐츠 유형 페이지에서 사용되는 문자 집합 설정
描述 例子
content-type 设定页面使用的字符集            

GB2312时,代表说明网站是采用的编码是简体中文;

ISO-8859-1时,代表说明网站是采用的编码是英文;

UTF-8时,代表世界通用的语言编码;

PS:html5页面的做法是直接使用

X-UA-Compatible IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式,以此来解决部分兼容问题。

以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。  
以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。  
以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。  
           

以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.

PS:谷歌添加一个插件:Google Chrome Frame(谷歌内嵌浏览器框架GCF),这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器。

expires 设定网页的过期时间。            

PS:必须使用GMT的时间格式

refresh 自动刷新并指向新页面。            

PS:2代表页面停留2秒后跳转到后面的网址上

set-cookie 如果网页过期,那么自动删除本地cookie。            

PS:必须使用GMT的时间格式。

windows-target 强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用
cache-control 缓存机制            

Public:指示响应可被任何缓存区缓存。

Private:指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效。

no-cache:指示请求或响应消息不能缓存。

no-store:用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

max-age:指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应。

min-fresh:指示客户机可以接收响应时间小于当前时间加上指定时间的响应。

max-stale:指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。

GB2312인 경우 대표자는 웹사이트에서 사용하는 인코딩이 중국어 간체임을 나타냅니다. ISO-8859-1인 경우 대표자는 인 경우 웹사이트에서 사용하는 인코딩이 영어임을 나타냅니다. UTF-8은 세계 공통 언어 인코딩을 나타냅니다. PS: html5 페이지의 방법은
X-UA 호환 IE8용 특수 태그로, 렌더링 방법을 시뮬레이션하기 위해 IE8 브라우저를 지정하는 데 사용됩니다. 특정 버전의 IE 브라우저를 사용하면 일부 호환성 문제가 해결됩니다. 위 코드는 IE 브라우저에 또는 문서 표준을 선언하기 위해 DTD를 사용하지 않으며 IE8/9는 IE7 엔진을 사용하여 페이지를 렌더링합니다.
위 코드는 IE8/9가 IE8 엔진을 사용하여 페이지를 렌더링할 것임을 IE 브라우저에 알려줍니다.
위의 코드는 IE8/9 이상 버전이 IE의 가장 높은 버전을 사용하여 렌더링할 것임을 IE 브라우저에 알려줍니다. 페이지.
위 코드 IE=edge는 IE에게 최신 엔진을 사용하여 웹 페이지를 렌더링하도록 지시하고 chrome=1은 Chrome 프레임을 활성화할 수 있습니다.PS: Google은 플러그인을 추가합니다: Google Chrome Frame(Google Embedded Browser Framework GCF), 이 플러그인은 사용자의 IE 브라우저를 변경하지 않고 유지할 수 있지만 사용자가 웹을 탐색할 때 실제로는 Google Chrome 브라우저 코어를 사용하고 있으며 IE6, 7, 8과 같은 여러 버전의 IE 브라우저를 지원합니다. .
만료 웹페이지의 만료 시간을 설정합니다. PS: GMT 시간 형식을 사용해야 합니다.
새로 고침 자동으로 새로 고침 및 지정 새 페이지. PS: 2는 페이지가 2초 동안 유지된 후 다음 URL로 이동한다는 의미입니다.
set-cookie 웹페이지가 만료되면 로컬 쿠키가 자동으로 삭제됩니다. ​ ​ ​PS: GMT 시간 형식을 사용해야 합니다.
windows-target 현재 페이지에서 페이지가 독립적인 페이지로 표시되도록 강제합니다. 자신의 웹페이지가 다른 사람에 의해 프레임 페이지로 호출되는 것을 방지할 수 있는 창 td>
cache-control 캐싱 메커니즘 ​​​​​공개: 모든 캐시 영역에서 응답을 캐시할 수 있음을 나타냅니다. 비공개: 단일 사용자에 대한 응답 메시지의 전체 또는 일부를 공유 캐시에서 처리할 수 없음을 나타냅니다. 이를 통해 서버는 다른 사용자의 요청에 유효하지 않은 사용자의 부분 응답만 설명할 수 있습니다. no-cache: 요청 또는 응답 메시지를 캐시할 수 없음을 나타냅니다. no-store: 중요한 정보가 의도치 않게 공개되는 것을 방지하기 위해 사용됩니다. 요청 메시지에 이를 보내면 요청 메시지와 응답 메시지 모두 캐싱을 사용하게 됩니다. max-age: 클라이언트가 지정된 시간(초)보다 크지 않은 수명으로 응답을 받을 수 있음을 나타냅니다. min-fresh: 클라이언트가 현재 시간에 지정된 시간을 더한 것보다 짧은 응답 시간으로 응답을 받을 수 있음을 나타냅니다. max-stale: 클라이언트가 제한 시간 이후에 응답 메시지를 받을 수 있음을 나타냅니다. max-stale 메시지 값을 지정하면 클라이언트는 지정된 제한 시간 값을 초과하는 응답 메시지를 수신할 수 있습니다.

name

name 속성은 주로 웹페이지를 설명하는 데 사용되며 해당 속성 값은 content입니다. 콘텐츠에 포함된 콘텐츠는 주로 검색 엔진 로봇이 정보를 찾고 검색하는 데 사용됩니다. 정보를 분류합니다.

설명
작성자 주석 웹페이지 작성자
키워드 검색 엔진에 포함할 페이지 키워드
설명 검색 엔진 포함을 위한 페이지 설명
뷰포트 는 페이지 확대/축소를 제어하는 ​​데 사용됩니다. td>
renderer 기본적으로 듀얼 코어 브라우저가 페이지를 렌더링하는 방법을 지정합니다. //기본 웹킷 커널/ / 기본 IE 호환 모드//기본 IE 표준 모드
描述 例子
author 标注网页的作者
keywords 页面关键词,用于被搜索引擎收录
description 页面描述,用于搜索引擎收录
viewport 用于控制页面缩放
renderer 指定双核浏览器默认以何种方式渲染页面。 //默认webkit内核//默认IE兼容模式//默认IE标准模式

PS:360浏览器支持

generator 说明网站的采用的什么软件制作
revised 网页文档的修改时间
robots 用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。            

取值:all|none|index|noindex|follow|nofollow, 默认all

all:文件将被检索,且页面上的链接可以被查询;

none:文件将不被检索,且页面上的链接不可以被查询;

index:文件将被检索;

follow:页面上的链接可以被查询;

noindex:文件将不被检索,但页面上的链接可以被查询;

nofollow:文件将不被检索,页面上的链接可以被查询。

copyright 网站版权信息

PS: 360 브라우저 지원

생성기 웹사이트를 만드는 데 사용된 소프트웨어 설명
수정 웹 문서 수정 시간
로봇 td> 검색 로봇에게 색인을 생성해야 하는 페이지와 색인을 생성할 필요가 없는 페이지를 알려주는 데 사용됩니다. 값: all|none|index|noindex|follow|nofollow, 기본값 allall: 파일이 검색되고 페이지의 링크를 쿼리할 수 있습니다. 없음; : 파일을 검색할 수 없으며 페이지의 링크를 쿼리할 수 없습니다.

색인: 파일을 검색할 수 있습니다.

페이지의 링크를 쿼리할 수 있습니다. 🎜>noindex: 파일은 검색되지 않지만 페이지의 링크는 쿼리될 수 있습니다. nofollow: 파일은 검색되지 않지만 페이지의 링크는 쿼리될 수 있습니다.
저작권 웹사이트 저작권 정보

요약대규모 웹사이트의 메타 설정을 살펴보면 일반적으로 많이 사용되는 것들에는 X-UA-Compatible, 키워드, 설명 등이 포함되어 있음을 알 수 있습니다. 위의 html 메타 태그 사용에 대한 요약(권장)은 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. Script Home에 많은 지원 부탁드립니다.

위 내용은 HTML의 메타 태그 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.