0

0

怎样编写HTML的元信息_网页头部信息的优化写法【教程】

雪夜

雪夜

发布时间:2026-02-28 18:59:02

|

473人浏览过

|

来源于php中文网

原创

怎样编写html的元信息_网页头部信息的优化写法【教程】

meta charset 和 http-equiv 的顺序会影响浏览器解析吗

会,而且影响很实际:如果 <meta charset> 不在文档前 1024 字节内,某些旧版 IE 或移动端 WebView 可能按默认编码(如 ISO-8859-1)解码后续 HTML,导致中文乱码或脚本加载失败。

实操建议:

立即学习前端免费学习笔记(深入)”;

  • <meta charset="UTF-8"> 必须放在 最开头,紧随 标签之后,前面不能有注释、空格或任何其他标签
  • <meta http-equiv="X-UA-Compatible" content="IE=edge"> 等兼容性声明可以放它后面,但不要前置
  • 避免用 http-equiv="Content-Type" 替代 charset —— 它已被废弃,且不被所有浏览器识别

viewport meta 的常见写法错误和响应式失效原因

写错一个参数,整个页面在手机上就可能缩放错乱或禁止缩放。最典型的是把 initial-scale 设为 1.0 却漏掉 width=device-width,结果浏览器按桌面宽度渲染,文字小到看不清。

实操建议:

立即学习前端免费学习笔记(深入)”;

  • 必须同时包含 width=device-widthinitial-scale=1,缺一不可
  • 不要加 user-scalable=no —— 它违反 WCAG 可访问性要求,iOS Safari 13+ 已部分忽略该指令
  • 避免 maximum-scale=1,它会锁死缩放,对视力障碍用户不友好,也常被现代浏览器降级处理
  • 示例正确写法:<meta name="viewport" content="width=device-width, initial-scale=1">

SEO 相关的 meta name 如何避免被搜索引擎忽略

不是写了 descriptionkeywords 就会被收录。Google 已完全忽略 keywords,而 description 超过 155 字符会被截断,含重复词或堆砌关键词反而降低可信度。

斯摩派(smapie)企业建站程序
斯摩派(smapie)企业建站程序

一个让ASP程序轻松做最少的代码编写量,一般企业所需要的功能都有,参数设置,数据库管理,文件管理,数据初始化,生成HTML页面(这是为了某些客户需要静态页面的需求),页面管理(这里是为了网站中某些单页面需求而开发的,这里你在前台只要用sub_c.article(2) 这个2是这里的id号,也可以是在比如index.asp?id=2 是一样的效果)公告管理,友情链接,信息发布(这里有分类,分类是无限

下载

实操建议:

立即学习前端免费学习笔记(深入)”;

  • <meta name="description" content="..."> 控制在 120–155 字符之间,用自然语言描述页面核心内容,开头就点明主题
  • 彻底删掉 <meta name="keywords"> —— 百度也已多年不使用它,留着只增体积
  • 如果页面是文章类,可加 <meta property="og:title"> 等 Open Graph 标签,但注意这些属于 property,不是 name,需配合 prefix 声明或服务端支持
  • 确保 description<title></title> 不重复,也不照抄正文第一段

robots meta 和 X-Robots-Tag 的优先级冲突怎么处理

当 HTML 里写了 <meta name="robots" content="noindex">,但 HTTP 响应头里又带了 X-Robots-Tag: index,搜索引擎以响应头为准 —— 头部声明优先级永远高于 HTML meta。

实操建议:

立即学习前端免费学习笔记(深入)”;

  • 静态页用 <meta name="robots"> 足够;动态页或需精细控制(比如仅禁止图片索引),优先用 HTTP 响应头 X-Robots-Tag
  • 不要两者混用同一策略,例如既在 header 发 X-Robots-Tag: noindex,又在 HTML 写 noindex —— 多余且易维护错位
  • 测试是否生效,别只看源码,用 curl 查响应头:curl -I https://example.com/page,确认 X-Robots-Tag 存在且拼写正确
  • noindex, follow 是常见合理组合;noindex, nofollow 通常没必要,除非页面完全无关且不想传递权重

最容易被忽略的是:所有 meta 标签都依赖文档解析时机。如果 JS 动态插入 <meta>,多数爬虫和预渲染服务根本看不到 —— 它们不执行 JS,只读取初始 HTML 字符流。

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
edge是什么浏览器
edge是什么浏览器

Edge是一款由Microsoft开发的网页浏览器,是Windows 10操作系统中默认的浏览器,其目标是提供更快、更安全、更现代化的浏览器体验。本专题为大家提供edge浏览器相关的文章、下载、课程内容,供大家免费下载体验。

1633

2023.08.21

IE浏览器自动跳转EDGE如何恢复
IE浏览器自动跳转EDGE如何恢复

ie浏览器自动跳转edge的解决办法:1、更改默认浏览器设置;2、阻止edge浏览器的自动跳转;3、更改超链接的默认打开方式;4、禁用“快速网页查看器”;5、卸载edge浏览器;6、检查第三方插件或应用程序等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

394

2024.03.05

如何解决Edge打开但没有标题的问题
如何解决Edge打开但没有标题的问题

若 Microsoft Edge 浏览器打开后无标题(窗口空白或标题栏缺失),可尝试以下方法解决: 重启 Edge:关闭所有窗口,重新启动浏览器。 重置窗口布局:右击任务栏 Edge 图标 → 选择「最大化」或「还原」。 禁用扩展:进入 edge://extensions 临时关闭插件测试。 重置浏览器设置:前往 edge://settings/reset 恢复默认配置。 更新或重装 Edge:检查最新版本,或通过控制面板修复

1015

2025.04.24

curl_exec
curl_exec

curl_exec函数是PHP cURL函数列表中的一种,它的功能是执行一个cURL会话。给大家总结了一下php curl_exec函数的一些用法实例,这个函数应该在初始化一个cURL会话并且全部的选项都被设置后被调用。他的返回值成功时返回TRUE, 或者在失败时返回FALSE。

452

2023.06.14

linux常见下载安装工具
linux常见下载安装工具

linux常见下载安装工具有APT、YUM、DNF、Snapcraft、Flatpak、AppImage、Wget、Curl等。想了解更多linux常见下载安装工具相关内容,可以阅读本专题下面的文章。

183

2023.10.30

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

429

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

599

2023.08.10

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

528

2023.06.20

Golang 测试体系与代码质量保障:工程级可靠性建设
Golang 测试体系与代码质量保障:工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

6

2026.02.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

AngularJS教程
AngularJS教程

共24课时 | 3.9万人学习

CSS教程
CSS教程

共754课时 | 37.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号