Blog

Blog

PHODAL

谷歌 Microdata之站内搜索

自从上次谷歌把头像从搜索结果中移除后,有些时候没有关注Google MicroData了。现在,发现谷歌可以支持站内搜索,如下图所示。

在搜索之前Review的《Learning Internet of Things》一书的时候发现Packet出版社也多出了搜索框。

Packt

于是,觉得些事必有蹊跷。

谷歌 Sitelinks Search Box

官方有这样的简介:

With Google sitelinks search box, people can reach your content more quickly from search results. Search users sometimes use navigational queries—typing in the brand name or URL of a known site—only to do a more detailed query once on that site. For example, suppose someone wants to find that video about the guilty dog on YouTube. They type YouTube, or you-tube, or youtube.com into Google Search, follow the link to YouTube, and then actually search for the dog video.

The sitelinks search box removes that extra step: a query for youtube displays a site-specific search box in the sitelinks section, so the user can immediately search for that guilty dog video without having to click through to the site.

与谷歌网站的搜索框,可以达到你的内容更快速的搜索结果。搜索用户有时使用导航查询在一个已知的网站只做一个更详细的查询一次,网站的品牌名称或URL打字。例如,假设有人想找到关于YouTube上的视频有罪的狗。他们类型的YouTube,或你管,或youtube.com在谷歌搜索,链接到YouTube,然后其实搜狗视频。

简单地来说,就是我们不再需要跳到某个网站,然后点搜索。

而这东西叫做: Sitelinks Search Box

过程一共是三步,实际上可以说只有一步,就是添加Microdata:

1.安装搜索引擎

(ps:对于像我这样已经有搜索功能的就不需要这么麻烦)

2.用Microdata或JSON-LD标记元素

JSON-LD的示例

<script type="application/ld+json">
{
   "@context": "http://schema.org",
   "@type": "WebSite",
   "url": "http://www.phodal.com/",
   "potentialAction": {
     "@type": "SearchAction",
     "target": "http://www.phodal.com/search/?q={search_term_string}",
     "query-input": "required name=search_term_string"
   }
}
</script>

MicroData示例

    <div itemscope itemtype="http://schema.org/WebSite">
      <meta itemprop="url" content="https://www.phodal.com/"/>
      <form itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
        <meta itemprop="target" content="https://www.phodal.com/search/?q={search_term_string}"/>
        <input itemprop="query-input" type="text" name="search_term_string" required/>
        <input type="submit"/>
      </form>
    </div>

3.耐心地等待谷歌把结果放进去。

在我的博客上,最后结果大概是这样的。serach_form.html

    {% load mezzanine_tags i18n future %}
    <div itemscope itemtype="http://schema.org/WebSite">
     <meta itemprop="url" content="http://www.phodal.com/" />
    <form action="{% url "search" %}" class="navbar-form navbar-right" role="search"  itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
    <meta itemprop="target" content="http://www.phodal.com/search/?q={search_term_string}"/>
    <div class="form-group">
        <input class="form-control" placeholder="{% trans "Search" %}" type="text" name="q" value="{{ request.REQUEST.q }}"  itemprop="query-input" type="text" name="search_term_string" required/>
    </div>

    {% if search_model_choices %}
        {% if search_model_choices|length == 1 %}
        <input type="hidden" name="type" value="{{ search_model_choices.0.1 }}">
        {% else %}
        <div class="form-group">
        <select class="form-control" name="type">
            <option value="">{% trans "Everything" %}</option>
            {% for verbose_name, model in search_model_choices %}
            <option value="{{ model }}"
                {% if model == request.REQUEST.type  %}selected{% endif %}>
                {{ verbose_name }}
            </option>
            {% endfor %}
        </select>
        </div>
        {% endif %}
    {% endif %}

    <input type="submit" class="btn btn-default" value="{% trans "Go" %}">

    </form>
    </div>

其他

这似乎是一个不错的功能,+ 1。只是对于像百度之类的似乎直接就可以了,不过对于广大的技术博客主业说可以说是一种福利。

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Engineer, Consultant, Writer, Designer

ThoughtWorks 技术专家

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 最新技术分享

标签