Rails：带有JS分页的索引页面的下一个/上一个元标记答案

【问题标题】：Rails: next/prev metatags for index page with JS paginationRails：带有JS分页的索引页面的下一个/上一个元标记
【发布时间】：2017-04-19 21:04:11
【问题描述】：

出于 SEO 原因，我想向 Google 提供有关我们杂志的更多信息，该杂志是我们网站的一部分。 Google 识别出存在分页内容。所以我被告知要为杂志的每一页添加next 和prev 元标记/链接（例如第 3 页）：

<link rel="prev" href="http://www.bla.com/de/magazin?page=2" />
<link rel="next" href="http://www.bla.com/de/magazin?page=4" />

我们使用带有 Kaminari gem 的 JSON 来对我们的文章进行分页。这是magazine_controller 的索引操作：

def index
  @articles = MagazineArticle.visible
                             .includes(:magazine_category)
                             .order(published_at: :desc)
                             .page(params[:page]).per(7)
  @slider_articles = @articles.first(3)
  @advertisement = Advertisement.for_start_page

  #set_pagination_meta_tags(params[:page])
  set_magazine_meta_tags

  respond_to do |format|
    format.html
    format.json { render_new_page(@articles, @advertisement) }
  end
end

# the method that renders the new page (as JSON)
def render_new_page(articles, advertisement)
  render json: {
    content: {
      articles: render_to_string(
        partial: 'magazine/article_page',
        locals: { articles: articles, advertisement: advertisement }
      ),
      link: render_to_string(
        partial: 'magazine/load_more_button',
        locals: { articles: articles }
      )
    }
  }
end

我们还使用Metatags gem 来处理元标记。

我写了一个方法来添加相对于带有我在索引操作中调用的方法的当前页面正如您在上面的控制器代码中看到的那样：

def set_pagination_meta_tags(page)
  page = page.to_i
  case page
  when 0..1
    set_meta_tags(next: magazine_url(I18n.locale, page: 2))
  when @articles.total_pages
    set_meta_tags(prev: magazine_url(I18n.locale, page: @articles.total_pages - 1))
  when 2..@articles.total_pages - 1
    set_meta_tags(prev: magazine_url(I18n.locale, page: page-1))
    set_meta_tags(next: magazine_url(I18n.locale, page: page+1))
  end
end

但这仅适用于第一页，然后 JSON 用于导航/加载更多内容，这不会更改元标记。

在深入之前，我想知道：是否可以设置这些链接？这种（动态）分页有意义吗？谢谢！

【问题讨论】：

标签： ruby-on-rails pagination

【解决方案1】：

与您已经使用的类似，您可以只返回一些呈现的 meta_pagination 部分，其中包含

= rel_next_prev_link_tags @articles

您的render_new_page 看起来像这样

def render_new_page(articles, advertisement)
  render json: {
    content: {
      articles: render_to_string(
        partial: 'magazine/article_page',
        locals: { articles: articles, advertisement: advertisement }
      ),
      link: render_to_string(
        partial: 'magazine/load_more_button',
        locals: { articles: articles }
      ),
      meta_pagination: render_to_string(
        partial: 'layouts/meta_pagination',
        locals: { articles: articles }
      )
    }
  }
end

（调整元分页部分的路径）

然后在你的 javascript 中删除 rel next/prev

$("head link[rel='next']").remove();
$("head link[rel='prev']").remove();

并使用

将新内容附加到 html 头部

$('head').append(metaPagination);

var metaPagination = response.content.meta_pagination;

【讨论】：

【解决方案2】：

Kaminari 实际上会为您执行此操作 - 请在此处查看相关文档：https://github.com/kaminari/kaminari#the-rel_next_prev_link_tags-helper-method

如果您想更深入地研究实现，那么看起来这是添加它的 PR：https://github.com/kaminari/kaminari/pull/200/files

TLDR - 将此添加到您的视图中

# In head:
<head>
  <%= yield :head %>
</head>

# Somewhere in body:
<% content_for :head do %>
  <%= rel_next_prev_link_tags @articles %>
<% end %>

【讨论】：

这不起作用，因为它也不会在加载新页面时更新下一个/上一个链接......
链接是如何设置的？他们是通过 UJS 加载其他内容，还是通过使用来自服务器的 JSON 提要的客户端 JS 加载？
客户端 JS 使用 JSON 提要。
我更新了问题并提供了将新页面呈现为 JSON 的方法
所以这里的问题是整个页面在与浏览器交互时没有刷新——只是数据。从 SEO 的角度考虑这一点：只要页面也可以直接访问，例如，如果我访问 bla.com/de/magazin?page=2 并且它提供了整个页面 - 那么搜索引擎将选择正确的值，因为正确的标签将呈现在页面加载