案例研究 · 砂岩石工 · Narrabeen

Northern Beaches Stone

一位位于 Narrabeen 的持牌石匠，旧网站曾被设置为不出现在搜索结果中。重建后，每类石材工程都有自己的页面，展示 84 张真实工程照片，并解答人们在来电前想问的问题。

行业: 石材工程：砂岩、石灰岩、青石、洞石
地点: Narrabeen，Northern Beaches
上线时间: 2026年10月
替换对象: 一个 2019 年的 WordPress 网站

项目需求

手艺精湛，网站却毫无作用

2019 年的 WordPress 网站只有首页、“关于我们”、“联系我们”和几条作品集条目，没有任何单项服务的页面，还有一项设置让它不出现在搜索结果中。对于一个靠人们搜索“sandstone retaining wall Northern Beaches”（Northern Beaches 砂岩挡土墙）或“sandstone fireplace”（砂岩壁炉）找上门的行业来说，这意味着网站带不来任何生意。

业主提供了 94 张新照片。网站要按服务分类把它们呈现在人们面前，同时不拖慢页面，还要解答人们在联系石匠之前会问的问题：需要市政审批吗？费用取决于什么？砂岩需要密封吗？它能经受住海水泳池的考验吗？

每项工程都在现场勘察后提供书面报价，因此网站上没有价格。费用页面转而解释影响价格的因素。

目标

在企业服务的地区，让每项服务都能被搜到，而不依赖内容单薄的城区引流页面
按服务分类展示作品，并保持全速加载
以搜索引擎和 AI 引擎可以引用的形式，解答审批、费用和密封方面的问题
保留原有标志、名称以及已有的四个网址
让执照和 Google 评价一目了然，在手机上一键即可来电

设计选择

炭灰与悉尼砂岩

配色来自石材本身：如湿润玄武岩或背光石墙般的深炭灰、温暖的砂岩金，以及代替白色的浅石奶油色。

配色

#1d1c1a Charcoal 900 深色区块、页脚和首屏遮罩
#2c2a27 Charcoal 800 标题和按钮边框
#d4a650 Sandstone 500 点缀色：焦点框、导航下划线、数据分隔线
#e3c07a Sandstone 400 深色背景上的点缀：图标和勾选标记
#f1e4c9 Sandstone 200 “serving”（服务地区）横幅和柔和高亮
#8a5a17 Sandstone 700 奶油底色上的小号金色文字，对比度达标
#22201d 墨色正文
#fbf8f2 背景石材奶油色，交替区块使用 #f3ede1

金色特意分为浅色和深色两个版本：浅色调只用在炭灰底上，凡是金色文字位于奶油底上时则使用较深的 #8a5a17，让小号文字保持 WCAG AA 对比度。

字体排印

标题

Fraunces

一款可变衬线字体，字形柔和并略带雕琢感，契合以传统材料为业的手艺行业。自托管，只保留拉丁字符子集，约 31 KB。

正文

System UI

San Francisco、Segoe UI 或 Roboto：整个网站只需下载一个字体文件，那就是标题字体。

H1 从 2.15rem 流畅缩放至 3.75rem，按 Fraunces 字体度量调整过尺寸的 Georgia 后备字体，确保字体加载时页面不会偏移。

标志、布局、照片与移动端

重新绘制的原版标志

圆形、三角形和正方形，配以疏排的大写字母。由于只有一张 2019 年的位图，我们将其重绘为矢量图形，每个字形都与原稿对齐，并以 SVG 内联，无需任何图片请求。

十项服务，一种结构

每个服务页面以“In short”（简而言之）答案开篇，随后是施工内容、可选方案、分步流程、影响费用的因素、审批、图库、相关项目、常见问题和指南。

可直接链接的图库

84 张照片按服务分组，配有固定显示、支持深层链接的分类标签，每个图块都有说明文字；查看器会立即显示缩略图，在完整图片加载时也绝不会跳动。

每张照片都兼顾隐私与准确

车牌、门牌号和人脸都已模糊处理，所有位置数据均已去除，每张照片都按实际使用的石材重新核对。一个后来确认为石灰岩的壁炉也因此更改了名称。

为工地上的手机而打造

手机上有固定的“致电”和“免费报价”栏、全屏菜单、紧凑的横向服务卡片；当标题位于照片中较繁杂的部分时，首屏遮罩会加深。

默认即无障碍

所有可交互元素都有 3px 的砂岩色焦点框，常见问题以真正的标题形式置于原生折叠面板中，评价星级配有文字标签，表单标签清晰可见。

构建方式

文案、schema、站点地图和 llms.txt 同出一源

手工编写的 PHP 8，没有 CMS、数据库或框架。服务、项目、指南、常见问题和服务地区都存放在结构化文件中，因此同一个数据源驱动页面文案、结构化数据、站点地图和 llms.txt。

控制在体积预算内的图片

构建步骤按每像素体积预算生成 480 至 2000px 的 AVIF 及 WebP 后备图片，并在每个断点上让尺寸与实际渲染宽度相匹配。

第一张照片单独绘制

首屏的其余四张照片在加载完成几秒后才显示，缓慢缩放效果也是那时才开始，因此没有任何内容与最大内容绘制争抢资源。

29 KB 的首页

约 2.9 KB 的关键 CSS 内联，其余放在一个样式表中；整个首页 HTML 的传输大小约为 29 KB。

无需验证码或 Cookie 即可获取潜在客户

报价表单直接回复客户，并通过签名时间令牌、蜜罐字段、来源检查、链接过滤和频率限制拦截垃圾信息。来电和邮件按页面进行追踪。

实时 Google 评价，不加载 Google 脚本

评分和最新评价在服务器端获取并缓存，未经筛选地显示，以姓名首字母代替头像。

每次发布都经过测试

在任何内容上线之前，自动爬取程序会检查每个页面、每个内部链接以及每个旧网址的重定向。

PHP 8
WordPress 迁移
案例研究
指南
图库
CSP

搜索与 AI 答案

因工程被找到，因答案被引用

用两个地区页面代替数十个内容单薄的城区页面，标题以服务和地点开头，内容以答案的形式组织。

答案优先

每个服务页面顶部都有一段“In short”（简而言之）摘要，另有四篇指南，分别讲解挡土墙审批、挡土墙费用、砂岩密封以及海水泳池周边的砂岩，每篇都配有核对清单、常见问题和资料来源。

一家企业，绝不混淆

名称、营业时间和服务区域与 Google 商家资料一致，网站还明确将这家企业与一家名称相近的石材护理公司区分开来，让 Google 和 AI 助手不会把两者混为一谈。

执照范围之内

网站上注明了执照类别，文案也严守其范围：凡是需要工程设计的墙体，石材工程都会按照工程师的设计，与持牌承包商配合施工。

320 个旧网址全部妥善处理

上线时测试了每一个已知的旧网址：现有的四个页面保留了原网址，87 个旧网址一次跳转即重定向到最接近的新页面或照片，WordPress 系统路径则返回 410 Gone。

{
  "@context": "https://schema.org",
  "@graph": [
    { "@type": "HomeAndConstructionBusiness" },
    { "@type": "Service" },
    { "@type": "Article" },
    { "@type": "CreativeWork" },
    { "@type": "ImageGallery" },
    { "@type": "FAQPage" },
    { "@type": "BreadcrumbList" }
  ]
}

nbstone.com.au 发布的 schema.org 类型，每个页面一个 JSON-LD 图谱。

成果

从隐身到全面收录

98Lighthouse 性能（移动端）
100无障碍、最佳实践和 SEO
36站点地图中的可收录页面
211图片站点地图中的图片
9项目案例研究
320已映射并测试的旧网址

Lighthouse 数据：移动端，线上首页，于 2026年10月19日测得（单次运行；各次运行分数略有差异）。页面和图片数量来自线上站点地图。

查看线上网站：nbstone.com.au

项目常见问题

关于 Northern Beaches Stone 网站的问题

没有找到您的问题？咨询工程师 →

为什么 Northern Beaches Stone 网站为每类石材工程分别设立页面？

人们搜索的是具体工程，例如砂岩挡土墙、碎拼铺装或砂岩壁炉，而不是“stonemason”（石匠）。旧网站根本没有服务页面，因此 NGN 建立了十个，每个都使用简短的关键词网址，并配有各自的照片、流程、费用因素、审批信息和常见问题。

NGN 如何处理 Northern Beaches Stone 工程照片中的隐私问题？

每张照片发布前都按原尺寸检查过。车牌、门牌号、人脸和一个电话号码都做了模糊处理，手机截图的状态栏被裁掉，所有 EXIF 数据（包括客户住所的 GPS 位置）都在图片构建过程中被去除。

为什么 Northern Beaches Stone 网站上没有价格？

石材工程受通行条件、石材种类、高度和排水等因素影响太大，无法公布固定价格，而且这家企业在免费现场勘察后会为每项工程提供书面报价。每个服务页面和挡土墙费用指南都转而解释影响价格的因素，既诚实地回答了问题，也给搜索引擎和 AI 引擎提供了可以引用的具体内容。

为什么这家石匠的网站只有两个地区页面，而不是每个城区一个页面？

数十个几乎相同的城区页面属于单薄内容，正是 Google 垃圾内容政策针对的对象。网站为 Northern Beaches 和 North Shore 各设一个页面，分别列出所服务的城区和市政辖区，结构化数据中则写明七个市政辖区。

Northern Beaches Stone 网站如何在不拖慢页面的情况下显示 Google 评价？

评分和最新评价在服务器端获取并缓存，然后渲染为纯 HTML，因此访客的浏览器不会从 Google 加载任何内容。评价者头像以姓名首字母代替，评分以文字显示而非评价标记，因为企业不得自行发布评价标记。

更多作品

我们打造的更多网站

物业整备与维护 · Mona Vale

Google Reviews

What our clients say.

5.0 from 19 Google reviews

We have used Next Generation Networks for several custom solution projects that went well beyond the standard scope listed on their website. Every time, the team has been exceptional—genuinely enthusiastic about tackling complex challenges and consistently delivering solutions that exceed…

James Johnson View on Google

Great internet and phone service, excellent customer service.

Fiori Mercuri View on Google

Impeccable support and service! Would highly recommend.

Samuel Tolentino View on Google

⭐⭐⭐⭐⭐

Great service from Next Generation! They really helped us get our internet running fast and smoothly. The process was easy, and their team was very helpful and responsive. We’re really happy with the improved internet speed and connection. Highly recommended!

Mariwel Largosa View on Google

We engaged Next Generation Networks to build the ecommerce site for South West Apparel, and we couldn't be happier with the result. The team's attention to detail was outstanding. Everything from the layout and product pages to the checkout experience was carefully thought through, and they took…

Houssam Homsi View on Google

Read all 19 reviews Leave us a review

联系我们

想要一个这样的网站吗？

告诉我们您的业务和现有网站。我们会在同一个工作日内给您一份坦诚的评估和方案。

地址

澳大利亚新南威尔士州悉尼

服务时间

每周 7 天，24 小时服务

给我们留言

我们会在同一个工作日内回复

姓名

电子邮件

咨询类型

留言

本网站受 reCAPTCHA 保护，并适用 Google 隐私政策和服务条款。