CSS-Tricks 是一个 WordPress 网站。WordPress 具有 内置搜索功能,但它并不十分实用。我并不责怪它,真的。搜索本身就是一个产品,而 WordPress 是一家 CMS 公司,而不是搜索公司。
您知道如何为您的网站创建 一个功能强大的搜索引擎 吗?
就是这样
<form action="https://google.com/search" target="_blank" type="GET">
<input type="search" name="q">
<input type="submit" value="search">
</form>
只需一点 JavaScript 的技巧来强制执行它搜索的网站
var form = document.querySelector("form");
form.addEventListener("submit", function(e) {
e.preventDefault();
var search = form.querySelector("input[type=search]");
search.value = "site:css-tricks.com " + search.value;
form.submit();
});
我只有 12% 的玩笑。我认为将人们引导到 Google 搜索结果中仅针对其搜索词的网站是完全可以接受的。没有人会对此感到困惑。如果有什么不同的话,他们会默默地感到高兴。
稍微调整一下就可以将他们发送到任何搜索引擎。比如 DuckDuckGo
https://duckduckgo.com/?q=site%3Acss-tricks.com+svg
但是
- 他们将离开您的网站
- 他们将看到广告
为了防止 #1,Google 长期以来一直提供网站搜索产品,您可以在其中创建和配置自定义搜索引擎并在自己的网站上嵌入它。
关于 Google 关闭该服务的消息有很多。 例如,“Google 网站搜索即将推出。现在怎么办?” 哎呀!这让我很困惑。
事实证明,他们真正关闭的是被称为 Google 网站搜索 (GSS) 的服务,这是一种企业产品。它将于 2018 年 4 月 1 日完全关闭。Google 还有另一种产品称为 Google 自定义搜索引擎 (CSE),它似乎不会消失。
CSE 正是我一直在使用的产品。它有一个免费版本,其中包含广告,您可以付费将其删除,尽管这方面的定价也很 令人困惑。我简直无法理解。对于像 CSS-Tricks 这样的网站,据我所知,每年将花费数百甚至数千美元。或者您可以连接您自己的 AdSense,并至少尝试从显示的广告中赚钱。
在所有这些之后,我想尝试一些新的搜索方法。 Algolia 是一款我听说过很多人尝试过的搜索产品,它似乎非常受欢迎。在 Algolia 团队的鼎力相助下,我们已经使用了几个月了。

如果我们建立一个实现难度等级,我上面提到的 HTML/JavaScript 表单是 1,而自行启动服务器并为 Solr 提供自定义数据结构并提出自己的评级算法是 10,那么 Algolia 就像 7。这相当复杂。
使用 Alogolia,您需要提供所有自己的数据和结构并将它们传输到 Algolia,因为所有搜索魔法都发生在他们的服务器上。任何新/更改/删除的数据也需要推送到那里。它不是您的数据库,但通常您执行的任何数据库 CRUD 也需要转到 Algolia。
在相同的难度等级上,如果您将 Algolia 添加到 WordPress 网站,则降至 3 或 4。WordPress 已经有自己的数据结构,而 Algolia 有一个 WordPress 插件 可以将所有内容推送到他们那里并保持同步。这并非零工作,但也不算太糟糕。该插件还提供了一个 UI/UX 替换,以替代默认的 WordPress 搜索表单,该表单提供“即时结果”作为下拉列表。它确实非常快。无论如何,提交表单,您将被带到由 Algolia 接管的全页搜索结果屏幕。
为了披露,我是 Algolia 的付费客户,并且没有赞助协议。
这是一个非常棒的产品。作为比较的一个点,我收到的关于切换的反馈为零。没有人写信告诉我他们注意到了搜索的变化,现在他们找不到东西了。而且人们经常写信告诉我类似的事情,所以没有反馈感觉像赢了一样。
我每月支付 59 美元,享受超快的页面内搜索,并且没有广告。
这几乎是一个无需动脑筋就能获胜的方案,但也有一些缺点。其中之一是搜索结果的排名。它开箱即用,效果非常出色,返回的结果比原生 WordPress 搜索的相关性更高。但是,毫不意外,它不是 Google。无论内部发生什么神奇的事情,它都在尽力而为,但它没有 Google 拥有的数据。它只有大量文本和一些内部链接数据。
有一些方法可以改进它。例如,您可以将您的 Google Analytics 数据连接到 Algolia,本质上是为它提供流行度数据,以便 Algolia 结果开始更像 Google 结果。设置起来并不容易,但可能值得一试!
无论如何!
你们在自己的网站上使用什么搜索方法?
一直使用 Relevanssi 插件。超级易用(即使使用自定义帖子类型和自定义字段),并且效果非常好。
不过 Relevanssi 也有限制,因为它仍然必须搜索您网站上的索引数据库表。Algolia 搜索响应时间低于 100 毫秒,如果不是更快的话,因为它是在外部进行的。Relevanssi 对于大约 2000 个帖子来说还不错,如果超过这个数量,则使用外部搜索。
您在文章开头提到的那个 Google/DuckDuckGo 技巧很聪明。
Elasticsearch
您听说过 Apache Solr 吗?它是一个功能非常强大的基于 Java 的搜索引擎,提供模糊搜索和“您是否指的是?”。我已经成功地在许多 Drupal 网站上运行它,甚至可以搜索上传文件的內容。似乎也有可用的 WordPress 实现。
我们使用 Swiftype 进行企业搜索。与 Algolia 一样,它需要您进行大量结构工作。一旦您设置好,它就会非常快,并且具有一些我非常喜欢的功能,例如结果排名。它在指标方面有点欠缺,但希望看到改进。
SearchWP 是我最喜欢的。您可以拥有多个搜索引擎(例如,一个用于整个网站,另一个用于商店仅用于产品),每个引擎都有自己的配置和结果相关性权重。它很容易上手,并且有许多可用的扩展。
我编写了一个 WordPress 插件,以将您的默认搜索强制到 Google https://github.com/kingkool68/wordpress-screw-it-just-use-google 不需要 JavaScript。
我使用 swiftype。最初,他们为较小的网站提供良好的定价,但随后价格大幅上涨。此时,我开始尝试使用 Algolia(并发现他们的客户服务令人印象深刻)。但是我最终还是留在了 swiftype。它需要一些工作才能使其正常运行,但对于自动完成非常棒。
我像避瘟疫一样避免搜索。就像您所说的,这很难,而且更容易尝试帮助为提供该服务而构建的人员做得更好,通过找到他们需要的信息,提供它,以便您可以专注于其他事情。
我不喜欢放弃,但我喜欢选择战斗(例如实施或学习 N 个搜索提供商的技术)。在某种程度上,这也是一种承认有人已经放弃了。结构太深,如果网站上的用户需要搜索整个网站(如果它很大,允许按方面排序,构建展示区域等),则网站不够直观。
我构建的第一个搜索允许按名称和平台查找游戏的作弊码。当时最合理,只有我的朋友使用它。它最终也变得不如点击平台、然后点击字母或类型、然后点击游戏更有意义(在检查搜索是否被使用之前,不要构建超出基本功能的搜索)。不想手动扫描列表?大多数浏览器客户端都提供页面内搜索,自 90 年代以来一直为您的访问者提供服务。(Android 通常在这方面有所欠缺,但所有请求都更慢)
对于客户,我已经设置了一些搜索解决方案。大部分都围绕着尝试拥有 1000 个顶级任务,要么缺少醒目地显示的直接链接,要么缺少过于广泛的产品。
我曾经参与过一个非常有趣的项目(后来也乐于将其退休),为一家利基市场中的时尚配饰制造商定制了一个网站搜索功能,他们希望既能自己分销产品,也能进行转售。他们的博客与网店是分开的,因为现成的电商解决方案往往具有非常糟糕的发布控制功能。管理服务器甚至付费让别人管理服务器也并非其核心业务的优先事项,因此,尽管最初很有前景,但并没有资金将其进一步发展。我们成功地将 BigCommerce 产品搜索和 WordPress 博客及页面搜索整合起来,使其运行得相当快速。事实证明,Algolia 等公司关注的是一项非常困难的事情,它不会直接为客户带来收入,而且可以通过其他方式解决。在某种程度上,即使速度更快也可能不是优势。当你不在玩射击游戏时,你能分辨出 300 毫秒和 100 毫秒的区别吗?我并不是说人体无法分辨,只是说上下文可能才是决定网站需要多快、多宽容等的关键因素。
今年,对于同一位客户,按色板和款式浏览已被证明更有效,因为它不依赖于在准确性、速度和设计之间取得平衡。它也不过分依赖于任何平台,并且具有可移植性。如果企业需要裁减或更换供应商,他们通常可以带着信息架构一起迁移,保留他们知道有效的方案,以便在迁移完成后恢复实验。
根据这份文档,DuckDuckGo 似乎使用了他们自己实现的 Apache Solr。
https://duck.co/help/company/architecture
我正在使用 lunr,它在中小型静态网站上运行良好,对我来说非常有用。它是可扩展的,这意味着您可以编写自定义函数添加到其处理过程中(称为“管道”),并且还支持多种语言。
顺便说一句,这段 JS 代码技巧并不是真正必要的——您也可以将站点域名作为名为
as_sitesearch
的独立 GET 参数/隐藏表单字段传递。实际上,如果您访问 https://www.google.de/advanced_search,可以进行更多微调——要排除的词语、要显示内容的首选语言(如果您的网站在一个域名下有多种语言),是在标题、URL 还是整个页面内容中搜索,特定文件类型的限制等等。
所有这些在提交时都会转换为 GET 参数,因此很容易弄清楚哪些参数对应哪些位置,并使用您自己的表单上的隐藏字段预填充某些选项。
“从…到…的数字范围”功能甚至允许添加计量单位(例如
10..35 kg
、£300..£500
)——如果您的内容结构良好且 Google 进行了彻底索引,这甚至可以让您想到诸如在线商店的“无成本价格范围搜索”之类的功能,或者类似的功能。(在实践中,这到底能有多好的效果,可能需要测试。)如果您想避免准备和发送所有数据的麻烦,一些提供商会为您抓取您的网站,因此您甚至无需做任何事情,只需在您的页面上嵌入他们的代码即可。我使用的是这些家伙:https://zesearch.co/,主要是因为它们更便宜,而且设置起来很简单。
在使用 Google CSE(几乎不可能设置 Google 提交按钮的样式)之后,我终于为一个客户选择了 SearchIQ。它实际上看起来和感觉都像您的 Algolia 实现。尽管仪表板上一直提示我升级到付费版本,但我目前仍在使用免费版本。与 Algolia 一样,它提供键入时出现的下拉结果,然后是所有结果的专用页面。它还显示图标大小的缩略图,并且您可以为缺少可用图像的页面/帖子添加通用图像。设置体验非常轻松。
提前声明——我在 Cludo 工作。话虽如此,如果您正在寻找一个易于使用的平台,并且在分析方面表现出色,请看看我们。我认为我们最大的差异化因素是我们提供的自定义和自定义结果排名,以及为所有客户提供直接电话和电子邮件支持。它也非常易于实施(您可以通过以下链接免费试用)
如果您想了解更多信息,请访问以下链接:https://www.cludo.com/en/internalsitesearch1/
如果我要搜索某些内容,我会在 Google 网页搜索中进行搜索。我会键入“search csstricks”来查找这篇文章(并且会立即找到它)。
对于我遇到的每个 CSS 问题,我都会这样做。我从未使用过网站上的内置 Google 搜索,我讨厌它的设计,而且它没有帮助。因为 10 次网站内搜索中,有 9 次没有用,所以我再也不会尝试了。应该有一个导航或某个站点地图来帮助查找内容。因此,我不会每月花费 59 美元。
另一方面——有多少用户使用您的网站内搜索?
虽然几年没有更新了,但 Perlfect http://www.perlfect.com/freescripts/search/ 是一款创建您自己的网站内搜索的优秀脚本。
我们运营着一个相当大的网站(12,000 多个页面),多年来一直在努力实现一致的搜索。主要是因为一开始的结构/数据很糟糕。由于 Algolia 的实施非常快速简便,因此我们更加专注于内容的正确性,或者至少,我们现在可以选择页面内容/数据以 JSON 格式导出到 Algolia。我们还没有达到为整个网站提供内容的程度,但 Algolia 在产品页面等方面特别有用。
不得不说,我是它的粉丝。我知道还有其他选择,但由于我们是一个小团队,Algolia 非常适合我们。