웹 프론트엔드 HTML 튜토리얼 HTML의 메타 태그 사용법에 대한 자세한 설명

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

May 21, 2017 am 10:04 AM
html meta 상표

다음은 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으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

HTML의 테이블 테두리 HTML의 테이블 테두리 Sep 04, 2024 pm 04:49 PM

HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML 여백-왼쪽 HTML 여백-왼쪽 Sep 04, 2024 pm 04:48 PM

HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

HTML의 중첩 테이블 HTML의 중첩 테이블 Sep 04, 2024 pm 04:49 PM

HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 테이블 레이아웃 HTML 테이블 레이아웃 Sep 04, 2024 pm 04:54 PM

HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

HTML 입력 자리 표시자 HTML 입력 자리 표시자 Sep 04, 2024 pm 04:54 PM

HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

HTML 정렬 목록 HTML 정렬 목록 Sep 04, 2024 pm 04:43 PM

HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.

HTML에서 텍스트 이동 HTML에서 텍스트 이동 Sep 04, 2024 pm 04:45 PM

HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.

HTML 온클릭 버튼 HTML 온클릭 버튼 Sep 04, 2024 pm 04:49 PM

HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.

See all articles