• 注册
  • WordPress后台-外观-小工具 进行配置小工具

    seo话题广场 seo话题广场 关注:1 内容:24

    前端可以做到哪些SEO设置?

  • 查看作者
  • 打赏作者
  • 拉黑名单
    • seo话题广场
    •   前端可以对底层SEO框架进行诸多调整,今天来介绍一些常见的方式与可以注意的地方。

        在head当中,我们可以定义许多标签让搜索引擎方便拿到资料,例如:

        可以定义网页的标题,会显示在搜索结果的标题

        :在meta可以放置许多跟网站有关的资讯,例如keyword,description等,但似乎对SEO的权重越来越小了。

        OpenGraph:像是在facebook,twitter等分享连结网站时显示的文字与图片等,常见的有og:title,og:type,og:image等等。

        SemanticTag

        HTML标签虽然看起来只是个标签,技术上来说也可以从头用

        做到尾,但对浏览器、阅读器、以及VoiceReader来说,如果能用符合语意的标签的话,除了提升可读性之外,对搜索引擎及阅读器来说也更容易解析与理解。

        例如在HTML就有、、、、、、、等等丰富的标签可供使用,可以让整个组织看起来更一目了然。当然,对于前端开发来说似乎太理想,总是会有「这个元件该用哪个tag表达才好?」、「要用h2还是h4?」等等的问题。也不需要过往矫正,看到div或span就好像十恶不赦一样。

        itemscope

        这是在HTML5之后引入的新标准,目的是为了让搜索引擎更容易解析内容。在html当中,你可以用itemscope以及itemprop来定义一些属性,目前Google、Yahoo!等搜索引擎都有支持。

        例如在搜索书籍的时候,有时会看到搜索结果有星星评价,虽然不一定是透过itemscope产生,但如果有定义的话可以帮助搜索引擎更快解析资料也说不定。

        在schema.org有定义各种type与可以设定的栏位,方便各大厂商跟着标准实作。

        This example shows the addition of Accessibility metadata. Although these
      properties are not

        a formal enumeration, there is evolving consensus amongst accessibility
      experts for

        appropriate values for these properties. This example shows simple text
      values,

        as suggested by www.a11ymetadata.org.

        Name:

        Holt Physical Science

        Brief Synopsis:

        NIMAC-sourced textbook

        Long Synopsis:

        N/A

        Book Quality:

        Publisher Quality

        Book Size:

        598 Pages

        ISBN-13:

        9780030426599

        Publisher:

        Holt, Rinehart and Winston

        Date of Addition:

        06/08/10

        Copyright Date:

        2007

        Copyrighted By:

        Holt, Rinehart and Winston

        Adult content:

        No

        Language:

        English US

        Essential Images:

        861

        Described Images:

        910

        Categories:

        Educational Materials

        Grade Levels:

        Sixth grade, Seventh grade, Eighth grade

        Submitted By:

        Bookshare Staff

        NIMAC:

        This book is currently only available to public K-12 schools and
      organizations in the

        United States for use with students with an IEP, because it was created
      from files

        supplied by the NIMAC under these restrictions. Learn more in the NIMAC
      Support Center.

        Reviews of Holt Physical Science (0 reviews)

        0 - No Rating Yet

        当然不只有Book,也有像是Moive、Article、Message等各式各样的type可供使用,其实蛮适合当成Databaseschema参考的。

        AMP

        AMP是由Twitter与Google共同开发的专案,目的是为了让mobile能够更快载入网页。透过文件中规范的语法与标签,你可以定义自己的AMP页面,这样在Google搜索时就可以几乎秒载入网页。虽然限制重重,但很适合文章、内容呈现的网站使用。

        SSR

        由于SPA必须要等到JavaScript载入后,如果直接用像是curl或是爬虫的方式抓取网页,只会得到一坨空空的index.html,虽然搜索引擎也会先解析JavaScript,不过SSR还是最有效果的方式,而且也能大幅减少初始载入的时间。

        不过要做到SSR的成本相当高,不仅前端的程式码要写的够谨慎之外,后端部分也要做不少处理,尤其是如果搭配redux的话要整合起来更加麻烦。目前在React.js与Vue.js都有对应的Framework可以帮助你做到这件事。(Next.js与Nuxt.js)

        SearchConsole

        你可以用searchconsole来查看跟提交搜索请求,让Google为你的网页建立索引,也可以在上面看到使用者怎么进入你的网页还有关键字。

        小结

        前端能够做到的SEO相当多,而这些小眉角累积起来就能有不小的助益。不过最重要的一点还是专注于网页的内容,并且尽力创造优质的内容,而不是想办法「骗」搜索引擎来拿流量。

      请登录之后再进行评论

      登录
    • 实时动态
    • 偏好设置
    • 返回顶部
    • 帖子间隔 侧栏位置: