⚡ 编程实验室🏗️ HTML🎨 CSS⚡ JavaScript🐍 Python🗄️ SQL☕ Java⚛️ React💚 Vue🟢 Node.js⚙️ C语言🐘 PHP🐹 Go🔷 TypeScript🐬 MySQL🔧 C++🎯 C#🦀 Rust🅱️ Bootstrap💡 jQuery🎸 Django🍃 MongoDB👗 Sass🎪 Kotlin📊 R语言📋 XML📊 Excel🐘 PostgreSQL🐳 Docker🅰️ Angular🎮 游戏🏠 网站首页

HTML meta 标签大全

HTML meta标签深入:charset字符集、name属性(description/keywords/author/viewport/robots/theme-color/color-scheme)、http-equiv属性(refresh重定向/X-UA-Compatible/content-security-policy) · 难度:入门 · +10XP

HTML meta 标签大全 —— 网页的配置中心

meta标签都在head里,用户看不到,但浏览器、搜索引擎、社交平台都在读取它们。

必选的meta标签

<meta charset="UTF-8">  <!-- 字符编码,必须放最前面 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

SEO相关

<meta name="description" content="页面描述,120-155字符最佳">
<meta name="keywords" content="关键词1,关键词2">
<meta name="robots" content="index, follow">

社交分享 Open Graph

<meta property="og:title" content="分享标题">
<meta property="og:description" content="分享描述">
<meta property="og:image" content="https://yoursite.com/thumb.jpg">
<meta property="og:url" content="https://yoursite.com/page">

加上OG标签后,分享到微信/微博/Twitter时会自动显示标题、描述和缩略图。

动手练习

  1. 基础练习:创建完整head区域,包含charset、viewport、description。
  2. 进阶应用:给页面添加OG标签,用微信分享调试工具查看预览效果。
  3. 项目实战:给网站每个页面配置完整meta标签(SEO+社交分享+PWA)。
Ctrl+Enter
🚀 升级VIP
解锁全部课程+AI助手

🏆 学习排行

加载中...

📊 统计

📖 101 篇
0 完成
🔥 0