内容指南

从视频表达,到页面结构与移动浏览

这组指南围绕具体制作与网站问题展开,每条内容都有独立主题,可用于理解短篇叙事、人物采访、专题组织、页面分工和基础技术实现。

视频内容与页面结构指南

短视频开场:先建立对象,再补充背景

短视频的前几秒通常决定用户是否愿意继续观看。有效开场不需要堆叠夸张信息,而应快速建立“谁、在什么情境下、当前发生什么”。如果背景复杂,可以先给最关键条件,再在后续逐步补充。这样既降低理解门槛,也能避免为了追求速度而牺牲必要语境。

  • 用具体人物、事件或场景进入主题
  • 背景信息只保留理解当前内容所必需的部分
  • 避免连续使用没有信息增量的悬念句

短篇叙事:每一段都应推动理解

短篇内容没有太多空间容纳重复观点。开场建立问题,中段展示变化,结尾完成回应,是常见但不必机械套用的思路。真正重要的是每一段都承担独立任务:要么提供新信息,要么改变人物处境,要么让观众重新理解前面的内容。

  • 检查相邻段落是否表达同一结论
  • 删去只起装饰作用但打断节奏的说明
  • 结尾与开场之间形成可感知的呼应

人物采访:问题越具体,回答越有信息量

“你怎么看创作”这类问题很容易得到宽泛回答。如果改成“在某次项目里你为什么改变原计划”,受访者更容易给出时间、条件和选择过程。具体问题能够把观点放回真实经历,也让后续剪辑更容易找到清晰的信息节点。

  • 围绕具体项目、选择或冲突提问
  • 追问决定发生前后的条件变化
  • 用作品细节验证人物的抽象观点

幕后内容:记录限制条件比记录热闹更重要

拍摄现场的忙碌画面并不自动构成有价值的幕后内容。真正值得保留的是会影响成片的条件,例如光线变化、场地限制、演员状态、时间压力和临时调整。把这些条件与最终画面对应起来,幕后记录才能解释作品,而不仅是展示过程。

  • 记录关键调整发生的原因
  • 保留能解释最终画面的对照信息
  • 减少与成片无关的重复现场镜头

主题企划:先定义一个中心问题

一个系列如果同时试图讨论太多事情,往往会让每一期都缺少明确重点。更稳妥的做法是先确定一个中心问题,再让不同内容分别承担背景、人物、过程、结果或复盘。这样可以形成系列感,同时避免每条内容只是更换包装。

  • 中心问题应能覆盖全部子内容
  • 每一期拥有独立结论或信息增量
  • 系列页只做关系说明,不重复完整正文

内容摘要:用差异点帮助用户判断是否进入

摘要不是正文第一段的机械截取,也不是“精彩内容不容错过”这样的通用句。它应说明这条内容具体关注什么、有什么不同、用户进去后能获得哪类信息。摘要越明确,用户越容易做出是否继续阅读或观看的判断。

  • 突出当前条目最独特的信息
  • 控制背景说明长度
  • 避免所有摘要使用相同开头和结尾

卡片标题:不要让每个标题都像同一个模板

批量内容最常见的问题是标题结构高度一致,只替换一个名词。更自然的标题应根据条目实际信息决定语法:有的可以直接描述对象,有的强调问题,有的突出结果或方法。标题形式出现变化,是内容差异真实存在的结果。

  • 先写清内容对象,再决定标题结构
  • 避免连续使用“如何…”或“为什么…”
  • 不为了关键词覆盖强行拉长标题

内链锚文本:告诉用户下一页具体有什么

“点击这里”“查看更多”几乎不能提供目标页信息。内部链接更适合直接说明目标,例如“查看人物访谈中的创作选择”或“继续阅读短篇叙事分析”。同一目标页面可以使用自然变化的锚文本,但语义应保持一致。

  • 锚文本描述目标页实际主题
  • 链接只出现在真实相关的上下文中
  • 避免辅助页获得不必要的全站重复链接

移动端标题:避免在窄屏中制造视觉墙

桌面上看起来合适的长标题,在手机上可能连续占据多行,挤压首屏内容。移动端不一定要改写SEO主标题,但可以通过字号、行高、宽度和周边留白调整层级,让标题仍然醒目,却不会压迫正文。

  • 使用流式字号而不是固定超大字号
  • 保持标题与正文之间的足够间距
  • 让按钮在窄屏下易于触控

移动导航:核心链接必须在脚本失效时仍可理解

JavaScript 可以增强菜单开合,但不应成为唯一的内容发现方式。主要页面链接应存在于服务器输出的HTML中,脚本只负责小屏交互。这样即使脚本未加载,页面主题和关键链接关系仍然可抓取、可理解。

  • 主要链接直接输出在HTML中
  • 菜单按钮同步aria-expanded状态
  • Escape关闭后将焦点返回触发按钮

图片使用:视觉资源应帮助理解而不是决定模块

有多少张图片,不应决定页面必须有多少个区块。核心内容页可以使用较强视觉帮助识别主题,而功能说明页则更适合依靠文字、列表和链接。只有当图片能说明对象、场景或主题时,才值得占据明显版面。

  • 内容图使用具体自然的alt描述
  • 纯装饰图片使用空alt
  • 不为消耗资源池而制造无关栏目

图片比例:统一不是唯一目标,稳定阅读才是

不同位置可以使用不同图片比例,例如首屏主视觉更宽,内容卡片保持中等横向比例,人物内容可能更适合接近竖向。关键在于同一组内容内部保持视觉稳定,避免图片高度随机变化导致阅读跳动。

  • 同类卡片保持一致的裁切规则
  • 使用object-fit控制展示而非拉伸
  • 移动端重新评估过宽或过高的比例

页面H1:一个页面只需要一个明确主主题

H1的任务是告诉用户和搜索引擎当前页面最主要的内容是什么。相近关键词不需要分别做成多个H1,也不应为了强调而重复出现。其他相关主题可以通过H2、正文和链接自然承接。

  • H1描述页面主要搜索意图
  • H2负责独立内容分段
  • 不要用视觉样式替代语义层级

H2写法:标题应该说明“这里有什么”

“继续发现”“更多精彩”只能表达动作,无法说明区块内容。更有效的H2应直接描述当前部分,例如“品牌视频内容”“幕后与制作”或“移动端继续浏览”。用户扫读页面时,单看标题就能理解大致结构。

  • 标题优先表达内容对象
  • 避免重复主关键词制造密度
  • 不同区块使用真实不同的语法结构

Description:自然概括页面,不把meta当关键词仓库

页面描述应以完整句子说明主要内容、用户可以获得什么以及与页面主题直接相关的实体。它不是把关键词用逗号拼接的地方。不同页面的描述如果只替换一个词,通常意味着页面本身也缺少足够差异。

  • 围绕当前页实际内容写完整句子
  • 自然出现核心词和相关实体
  • 不要承诺页面不存在的功能或数据

Canonical:让一个内容有一个稳定索引地址

同一内容如果能够通过多个地址访问,Canonical可以帮助声明希望搜索引擎采用的主要URL。它必须指向真实可访问且与当前正文一致的页面,不应把所有内页统一指向首页。

  • 每个可索引页面输出完整绝对地址
  • 参数专题保留实际必要参数
  • 不要把不同内容错误合并到同一canonical

Sitemap:只提交真实且希望被索引的页面

站点地图不是“未来可能存在页面”的规划表。它应包含当前实际存在、可正常访问且有独立内容价值的URL。不存在的地址、404页面或没有索引价值的参数组合不应加入其中。

  • 不伪造lastmod日期
  • 新增或删除页面时同步更新
  • 避免把重复参数URL批量提交

404处理:明确错误比自动跳首页更可靠

不存在的页面应返回真正的HTTP 404状态,并提供正常继续浏览的出口。自动把所有错误地址重定向到首页,会让用户误以为链接正常,也让搜索引擎难以识别无效URL。

  • 响应状态必须为404
  • 说明当前地址不存在
  • 提供少量真正相关的继续浏览链接

页面分工:品牌页和使用页不应重复同一品牌介绍

品牌内容页可以展开视频类型、主题企划和幕后信息;社区与APP页则处理移动浏览、互动和隐私场景。若两个页面都用相同的“品牌介绍—特点—推荐”结构,只换关键词,就会产生明显重复。

  • 先定义每页独立搜索意图
  • 正文只保留支持当前意图的信息
  • 跨页重复内容只保留必要简述

弱主题:有相关词不等于必须做成一级栏目

某些搜索词可能与品牌有关,但证据不足以形成稳定、独立的内容需求。此时更适合放在后置专题或相关内容中,而不是与核心主题平级。这样既能覆盖延伸兴趣,也不会稀释网站主要方向。

  • 判断是否存在独立信息价值
  • 观察是否会与主页面抢同一关键词
  • 内容不足时优先合并

专题数量:由内容价值决定,不由关键词数量决定

大量关键词并不意味着需要大量页面。很多词只是同一需求的不同表达。专题只有在能提供独立信息、独立浏览目的和清晰内部关系时才值得创建,否则合并到更完整的页面更有价值。

  • 先聚类搜索意图再决定URL
  • 相近表达放入同一页面自然覆盖
  • 拒绝用编号或换词制造规模

内容唯一性:独立标题必须对应独立信息

两个条目如果标题不同,但摘要、正文和结论基本相同,就不能算独立内容。生成或编辑时应先确定每个条目的独立信息点,再写标题与摘要。必要时宁愿减少数量,也不要保留弱差异内容。

  • 比较核心观点而不只比较字面
  • 合并高度相似的条目
  • 避免固定句式批量扩展

数据文件:结构化内容也需要去重

把内容放进PHP数组并不会自动获得质量。每个数据对象仍应拥有不同的标题、摘要和核心说明,并在输出前检查是否存在高度近似的字段。统一数据源的意义是便于维护,而不是方便复制。

  • 同一内容尽量使用单一数据源
  • foreach输出前确认数据有真实差异
  • 不要让不同标题指向相同正文

真实性:不知道的数据不要用数字装饰

播放量、下载量、市场份额、认证和合作关系都属于需要依据的事实。没有真实数据时,最稳妥的方式是不用数字或身份声明,而使用可验证的定性描述。虚构数据即使看起来“像网站”,也会降低可信度。

  • 不展示没有来源的运营数字
  • 不声称未经验证的官方合作
  • 不制造实时排名或热度

CTA:每个按钮都应该有真实去处

按钮的视觉权重很高,因此点击后必须发生与文案一致的真实动作。如果只是滚动到内容区,就写“浏览精选内容”;如果进入另一页面,就明确写目标主题。空链接和javascript:void(0)都会破坏使用体验。

  • 按钮文字与目标一致
  • 目标地址真实存在
  • 不为视觉对称增加无用CTA

颜色层级:强调色越少,关键操作越清晰

当所有标签、按钮、标题和装饰都使用高饱和强调色时,用户很难判断真正重要的位置。把玫瑰色用于品牌识别,把更高识别度的莓红用于主要操作,其余区域保持暖白和柔和底色,可以形成更稳定的阅读节奏。

  • 正文始终保持足够对比度
  • 主色和强调色承担不同任务
  • 避免大面积荧光或高刺激渐变

内容密度:核心区域可以丰富,辅助区域应该收敛

首页前段承担主要发现任务,可以呈现更多不同类型的内容入口。进入辅助主题后,应逐步减少并列模块,使用更紧凑的说明和链接完成分流。所有栏目都做成同样大小,会让主次关系消失。

  • 核心内容获得更高视觉占比
  • 辅助主题减少重复说明
  • 页面末段以导流而非再次介绍为主

首屏:先让用户确认网站主要提供什么

首屏不必塞入所有频道或功能。对于主题较集中的网站,最重要的是清楚表达核心内容和主要浏览入口,让用户快速判断是否匹配需求。社区、APP或弱专题可以在后续区域逐步出现。

  • H1直接表达核心内容方向
  • 首屏CTA连接真实主要内容
  • 减少近义入口并列竞争注意力

搜索功能:内容量不大时不必强行加入

站内搜索只有在用户确实需要快速定位大量内容时才有价值。内容规模有限、信息架构清晰的网站,可以通过导航、主题入口和内部链接完成发现。为了“功能齐全”加入空泛搜索,反而增加维护成本。

  • 先判断内容规模与发现难度
  • 核心页面始终可通过普通链接访问
  • 如实现搜索,应使用真实站内数据

无数据库架构:内容仍然可以保持结构化

PHP数组可以承载页面元信息、卡片数据和专题内容,并通过公共函数统一输出。关键是把内容与模板职责分开:数据负责真实信息,函数负责安全转义与通用呈现,页面负责当前主题的结构。

  • 数据保存在明确数组中
  • 动态输出统一HTML转义
  • 核心正文由服务端直接输出

PHP安全:GET参数必须限制在已知集合

参数页面如果直接信任任意输入,容易产生异常路径、未定义索引或错误输出。更安全的做法是读取参数后与已知主题集合比对,不存在时返回404,而不是把未知值直接拼入文件路径或数据库查询。

  • 只接受预定义主题键
  • 未知参数返回合理404
  • 输出动态文本统一htmlspecialchars

公共Header:元信息和脚本顺序应集中维护

多个页面共享标题输出、Canonical、样式表和固定脚本时,公共Header可以减少遗漏。页面只提供自己的元数据,再由统一文件安全输出。统计脚本若有固定顺序要求,也更适合在一个公共位置集中保证。

  • 每页提供独立title与description
  • 固定脚本在head中保持顺序
  • 公共文件避免依赖未定义变量

公共Footer:只保留稳定且真实的全站入口

页脚适合放置核心页面、必要辅助页面和少量站点说明,不需要复制顶部导航的所有细节,也不应为了填充空间加入不存在的社交账号、客服电话或合作标识。

  • 链接目标全部真实存在
  • 避免虚构联系方式
  • 辅助入口数量保持克制

可访问性:交互状态需要让键盘和辅助技术感知

菜单、抽屉和折叠内容在视觉上打开或关闭时,aria-expanded、aria-hidden等状态也应同步。键盘用户应能通过Tab进入主要链接,通过Escape关闭临时面板,并在关闭后回到触发位置。

  • 保持可见焦点样式
  • 交互按钮使用真实button元素
  • 不要让固定元素遮挡正文焦点

减少动画:尊重用户的系统偏好

装饰动画并不是信息价值的一部分。当系统开启减少动态效果时,页面可以取消非必要过渡与动画,避免对敏感用户造成不适。即使动画完全失效,核心正文和导航仍应正常工作。

  • 使用prefers-reduced-motion媒体查询
  • 不让动画控制内容可见性
  • 关键状态变化不依赖复杂动效

性能:少依赖比堆框架更适合简单内容站

原生HTML、CSS和少量JavaScript已经能够完成大多数内容浏览、菜单和响应式需求。减少第三方框架、字体和图标库,可以降低请求数量、版本依赖和阻塞风险,同时让SEO正文更直接地出现在服务端输出中。

  • 只加载实际需要的脚本
  • 图片使用合适尺寸并延迟非首屏资源
  • 避免为了单一交互引入大型依赖

部署检查:语法通过只是第一步

PHP语法检查能够发现解析错误,但无法发现所有实际问题。部署前还应检查require路径、页面链接、图片文件名、Canonical、404状态和参数处理,并确认所有正常页面都通过公共头部输出必要资源。

  • 全部PHP文件执行php -l
  • 扫描href、src与form action
  • 确认站点地图只包含真实页面

代码体积:增加真实内容比复制代码更合理

当项目需要达到一定源码规模时,最合理的方式是补充真实有用的内容、独立页面深度或实际功能,而不是复制CSS、重复正文或写大量注释。文件体积应当来自网站本身的信息价值。

  • 新增内容必须有独立主题
  • 避免重复同一段落变换标题
  • 不使用空白、垃圾数据或无效文件

首页与内页:概括和展开要有明显区别

首页应该帮助用户理解主要内容并选择下一步,而内页负责完整回答更具体的需求。如果首页已经详细写完某个辅助主题,内页就很难再提供独立价值;反过来,如果首页只保留概括和入口,页面关系会更清楚。

  • 首页提供主题概览和主要发现
  • 内页承担具体问题的深入说明
  • 避免跨页复制完整段落

品牌词覆盖:自然出现比固定密度更重要

品牌词应出现在真正需要说明品牌和页面主题的位置,例如H1、首段或内部链接。强行在每个小标题和每段正文中重复品牌词,会破坏自然阅读,也无法增加真实的信息价值。

  • 一个页面围绕单一主意图
  • 辅助词在相关语境中自然出现
  • 不以关键词密度作为最高目标

近义词处理:页面不是关键词的一对一容器

“主页”“在线”“网站”等词可能只是同一访问需求的不同说法。如果用户期待的是同一内容,将它们放在同一核心页面自然承接,比拆成多个相似URL更符合实际。页面数量应由信息差异决定。

  • 先识别搜索目标是否相同
  • 高度重合的词合并承载
  • 只有独立需求才创建独立页

内容顺序:先满足主要问题,再提供延伸发现

页面的前半部分应优先回答用户进入时最可能期待的内容,延伸主题可以放到后面通过链接继续。这样的顺序既有利于阅读,也能让页面主题更集中。内部的SEO判断不需要写给访客,只需要体现在实际结构中。

  • 首屏直接对应主要需求
  • 辅助内容逐步后置
  • 末段提供相关页面出口

视觉一致性:统一语言不等于所有模块长一样

一致性来自色彩、圆角、间距和文字层级等设计语言,而不是把所有内容都做成相同三列卡片。核心内容可以使用更丰富的网格,说明页面可以采用列表和正文,专题页也可以使用更聚焦的文章结构。

  • 组件形式服从内容任务
  • 同类信息保持一致视觉规则
  • 不同页面允许明显结构差异

辅助文本:避免把开发规则写给普通访客

页面正文应服务于用户理解内容,不需要解释“本页为什么这样布局”“某关键词为什么被弱化”或“图片为什么放在这里”。这些属于开发和内容规划依据,真正呈现给用户的应是内容本身。

  • 删除内部策略和判断依据
  • 不要把SEO说明改写成浏览指南
  • 可见文案只保留用户有用的信息

联系页面:没有真实联系方式时不要编造

如果项目没有提供邮箱、电话或社交账号,联系页面不应凭空生成。可以说明适合反馈的问题类型,并等待部署方补充真实渠道。这样比虚构一个看似完整的客服体系更可靠。

  • 不编造邮箱和电话号码
  • 说明反馈所需的必要信息
  • 避免要求用户提交敏感数据

隐私说明:只描述能够支持的事实

隐私页面可以说明常规服务器日志、用户主动输入以及固定脚本可能涉及的数据处理,但不应在未知配置下承诺“绝不收集”“完全匿名”等绝对结论。具体第三方脚本行为应以真实配置和服务规则为准。

  • 避免无法验证的绝对承诺
  • 说明用户应减少提交无关敏感信息
  • 区分站点自身与第三方处理

内容更新:稳定结构比频繁改URL更重要

当内容持续增加时,可以在现有主题页中扩展数据或新增真正独立的专题。只要主题和URL仍然匹配,就不必频繁更换地址。稳定的页面关系有利于用户收藏,也便于搜索引擎持续理解站点结构。

  • 新增内容优先进入现有合适主题
  • 真正新意图再建立新URL
  • 页面调整后同步更新内链与sitemap

最终审查:从用户看到的页面反向检查

完成开发后,可以逐页查看最终HTML和浏览效果,确认标题是否清楚、段落是否重复、按钮是否有真实用途、图片alt是否合理、移动端是否溢出。代码层面的正确并不等于页面层面的可用,二者都需要检查。

  • 检查每页唯一H1和独立元信息
  • 检查可见文案是否泄漏内部规则
  • 检查正常页面与404的响应差异