HTML 메타를 사용하여 웹 페이지를 최적화하는 방법

이번에는 HTML 메타를 사용하여 웹 페이지를 최적화하는 방법과 HTML 메타를 사용하여 웹 페이지를 최적화할 때의 주의 사항에 대해 설명하겠습니다.

요약

 태그는 HTML 문서에 대한 메타데이터를 제공합니다. 메타데이터는 페이지에 표시되지 않지만 기계에서 읽을 수 있습니다. 브라우저(콘텐츠가 표시되거나 페이지가 다시 로드되는 방식), 검색 엔진(키워드) 또는 기타 웹 서비스에서 사용할 수 있습니다. —— W3School

참조 문서

페이지 키워드, 각 웹 페이지에는 웹 페이지의 콘텐츠를 설명하는 고유한 키워드 세트가 있어야 합니다.
사람들이 검색할 가능성이 있는 설명적이고 대표적인 키워드와 문구를 사용하고, 페이지에 제공되는 정보를 정확하게 설명하세요. 너무 짧은 콘텐츠를 표시하면 검색 엔진이 관련성이 있다고 간주하지 않을 수 있습니다. 또한 태그는 874자를 초과할 수 없습니다.

<meta name="keywords" content="your tags" />

페이지 설명, 각 웹페이지에는 웹페이지의 내용을 정확하게 반영하는 150자 이하의 설명 태그가 있어야 합니다.

<meta name="description" content="150 words" />

검색 엔진 색인 방법인 robotsterms는 쉼표(,)로 구분된 값 집합이며 일반적으로 none, noindex, nofollow, all, index 및 follow 값입니다. nofollow 및 noindex 속성 값을 올바르게 사용하세요.

페이지 리디렉션 및 새로 고침: 콘텐츠의 숫자는 시간(초), 즉 새로 고치는 데 걸리는 시간을 나타냅니다. URL을 추가하면 지정된 웹 페이지로 리디렉션됩니다(검색 엔진은 이를 자동으로 감지할 수 있으며, 엔진에 의해 오해의 소지가 있는 것으로 간주되어 처벌되기 쉽습니다).

<meta http-equiv="refresh" content="0;url=" />

Other

<meta name="author" content="author name" /> <!-- 定义网页作者 --><meta name="google" content="index,follow" /><meta name="googlebot" content="index,follow" /><meta name="verify" content="index,follow" />

모바일 기기

viewport
: 모바일 브라우저의 디스플레이를 최적화할 수 있습니다. 웹 사이트가 응답하지 않으면 초기 크기 조정을 사용하지 않거나 크기 조정을 비활성화하십시오.
대부분의 4.7~5인치 기기의 뷰포트 너비는 360px로 설정되어 있으며, 5.5인치 기기는 400px로 설정되어 있으며, iphone6 ​​​​plus는 414px로 설정되어 있습니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/><!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边  -->

1.width: 너비(숫자/장치 너비)(범위 200~10,000, 기본값은 980픽셀)
2.

height

: 높이(숫자/장치 높이)(범위 223~10,000)
3.initial-scale: 초기 배율 비율(범위 >0 ~ 10) 4.minimum-scale: 사용자가 확대/축소할 수 있는 최소 배율 5.maximum-scale: 최대 배율 user is allowed to Zoom to
6 .user-scalable: 사용자가 상태 표시줄을 수동으로 축소할 수 있는지 여부(no, yes)
7.minimal-ui: 페이지가 로드될 때 상단 및 하단 상태 표시줄을 최소화할 수 있습니다. (더 이상 사용되지 않음)
응답하지 않는 웹 사이트에서 많은 사람들이initial-scale=1을 사용하는데, 이로 인해 웹 사이트가 100% 너비로 렌더링되고 사용자가 수동으로 페이지를 이동하거나 확대/축소해야 합니다. user-scalable=no 또는 maximum-scale=1을initial-scale=1과 함께 사용하면 사용자는 전체 내용을 보기 위해 웹 페이지를 확대/축소할 수 없습니다.

WebApp 전체 화면 모드: Disguise 앱, 오프라인 애플리케이션.

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->

상태 표시줄 숨기기/상태 표시줄 색상 설정: WebApp 전체 화면 모드가 켜져 있는 경우에만 적용됩니다. 콘텐츠의 값은 기본값 | 검정-반투명입니다.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

홈 화면에 추가 후 제목

<meta name="apple-mobile-web-app-title" content="标题">

번호를 무시하고 자동으로 전화번호로 인식

<meta content="telephone=no" name="format-detection" />

이메일 주소 인식을 무시

<meta content="email=no" name="format-detection" />

스마트 앱 추가 스마트 앱 배너: 브라우저에 알림 본 웹사이트에 해당하는 앱을 해당 페이지에 배치하세요. 다운로드 배너를 표시합니다(아래 그림 참조). 참고문서

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->  
<meta name="HandheldFriendly" content="true">  
<!-- 微软的老式浏览器 -->  
<meta name="MobileOptimized" content="320">  
<!-- uc强制竖屏 -->  
<meta name="screen-orientation" content="portrait">  
<!-- QQ强制竖屏 -->  
<meta name="x5-orientation" content="portrait">  
<!-- UC强制全屏 -->  
<meta name="full-screen" content="yes">  
<!-- QQ强制全屏 -->  
<meta name="x5-fullscreen" content="true">  
<!-- UC应用模式 -->  
<meta name="browsermode" content="application">  
<!-- QQ应用模式 -->  
<meta name="x5-page-mode" content="app">  
<!-- windows phone 点击无高光 -->  
<meta name="msapplication-tap-highlight" content="no">

웹페이지 관련

인코딩 선언

<meta charset=&#39;utf-8&#39; />

최신 버전의 IE, Chrome 사용 우선

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

브라우저 커널 제어: 국내 많은 브라우저에는 듀얼 코어(웹킷, 트라이던트), 웹킷 커널 고속 탑재 브라우징, IE 커널은 웹 페이지 및 레거시 웹 사이트와 호환됩니다. 메타 태그를 추가하는 웹사이트는 브라우저가 선택할 커널 렌더링을 제어할 수 있습니다. 참고문서

<meta name="renderer" content="webkit|ie-comp|ie-stand">

국내 듀얼코어 브라우저의 기본 커널 모드는 다음과 같습니다.

1. Sogou 고속 브라우저, QQ 브라우저: IE 커널(호환 모드)

2.360 속도 브라우저: Webkit 커널 (속도 모드) )

브라우저가 로컬 컴퓨터의 캐시에 있는 페이지 콘텐츠에 액세스하는 것을 금지합니다. 이 설정을 사용하면 방문자는 오프라인으로 탐색할 수 없습니다.

<meta http-equiv="Pragma" content="no-cache">

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

XHTML에서 제목 태그와 단락 태그를 사용하는 방법

반응형 프레임워크에서 테이블 헤더의 자동 줄 바꿈을 처리하는 방법

HTML에서 가로줄 주석과 코드 주석을 사용하는 방법

위 내용은 HTML 메타를 사용하여 웹 페이지를 최적화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!