jjzjj

javascript - AngularJS 内容和谷歌

coder 2024-02-29 原文

最近我看到一些文章指出 Google 现在可以抓取网站并呈现 CSS 和 Javascript。 Google 自己的示例文章:http://googlewebmastercentral.blogspot.co.uk/2014/05/understanding-web-pages-better.html

我在路由上使用 HTML5 模式在 Angular 中设置了一个单页应用程序。我的 index.html 中的 ng-view 是根据 URL 填充的，如下所示:

app.config(function($routeProvider, $locationProvider){

  $locationProvider.html5Mode(true);

  $routeProvider.when("/", {
    templateUrl: "/views/dashboard.html"
  }).when("/portfolio", {
    templateUrl: "/views/portfolio.html"
  });

});

Google 现在应该转到 www.example.com/portfolio，执行从 views/portfolio.html 引入内容的 javascript 并能够读取所有内容那个内容对吗？

根据我读过的那些文章，这就是应该发生的事情。这个特别详细地解释了有关 Angular 的信息:https://weluse.de/blog/angularjs-seo-finally-a-piece-of-cake.html

问题来了。当我使用 Google 网站站长工具和 Fetch 或 Fetch and Render 功能来查看 Google 如何查看我的页面时，它不会呈现 JS，只会显示初始 HTML在我的 index.html 中。

有效吗？我做错了什么吗？我该如何测试它？

最佳答案

因此，正如我在评论中提到的，希望这个答案能为我的意思提供更多背景信息。

因此，当您声明 html5Mode 时, 还包括 hashPrefix :

$locationProvider
    .html5Mode(true)
    .hashPrefix('!');

然后，在您的 <head> 中，包括这个标签:

<meta name="fragment" content="!">

这里发生的是您为 History API 提供了一个后备措施，这意味着所有使用兼容浏览器访问的用户(基本上现在的所有浏览器)都会看到:

http://example.com/home/

而且只有在像 IE9 这样的恐龙浏览器上他们才会看到这个:

http://example.com/#!/home/

现在，这是在现实生活中，有真实的人作为访客。您特别询问了有关被使用机器人的 Google 编入索引的问题。他们会尝试去 example.com/home/作为服务器上的实际目的地(意思是 /home/index.html )，这显然不存在。通过提供 <meta>上面的标签，你已经向机器人提供了提示，而不是转到 ?_escaped_fragment站点的版本(如 index.html?_escaped_fragment=home )并将其与 /home/ 的 URL 相关联在实际的 Google 搜索中。

它完全在后端，您网站的所有访问者仍然会看到干净的 URL，这只是因为在后台 Angular 使用 location.hash，这在服务器端是看不到的。最重要的是，您的实际用户不会受到影响并且不会有难看的 URL，除非他们使用的浏览器不支持 History API。对于这些用户，您所做的就是让网站开始为他们工作(就像之前它会被破坏一样)。

希望这对您有所帮助!

更新

由于您使用的是 MEAN 堆栈，因此您还可以选择一个已经存在很长时间的不同方向，即使用 HTML 快照。有一些 npm 将提供快照(意思是来自渲染后的静态 HTML)，可以在显示的位置从您的服务器提供这些快照。该技术有点过时，但它从 2012 年开始就存在，并且被证明是有效的。

当我这样做的时候，我使用了 grunt-html-snapshot , 但还有其他人在那里。您甚至可以使用 PhantomJS 制作快照，尽管我从未这样做过。

关于javascript - AngularJS 内容和谷歌，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28814524/

和谷javascriptcodehtmlsectionangularjsseo

有关javascript - AngularJS 内容和谷歌的更多相关文章

  1. ruby - 将数组的内容转换为 int - 2

    我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]

  2. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容？ - 2

    我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  3. ruby - 查找字符串中的内容类型(数字、日期、时间、字符串等) - 2

    我正在尝试解析一个CSV文件并使用SQL命令自动为其创建一个表。CSV中的第一行给出了列标题。但我需要推断每个列的类型。Ruby中是否有任何函数可以找到每个字段中内容的类型。例如，CSV行:"12012","Test","1233.22","12:21:22","10/10/2009"应该产生像这样的类型['integer','string','float','time','date']谢谢! 最佳答案 require'time'defto_something(str)if(num=Integer(str)rescueFloat(s

  4. ruby - 如何使用 Selenium Webdriver 根据 div 的内容执行操作？ - 2

    我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption

  5. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  6. ruby - 如何在ruby中提取方括号内的内容 - 2

    我正在尝试提取方括号内的内容。到目前为止，我一直在使用它，它有效，但我想知道我是否可以直接在正则表达式中使用某些东西，而不是使用这个删除功能。a="Thisissuchagreatday[coolawesome]"a[/\[.*?\]/].delete('[]')#=>"coolawesome" 最佳答案 差不多。a="Thisissuchagreatday[coolawesome]"a[/\[(.*?)\]/,1]#=>"coolawesome"a[/(?"coolawesome"第一个依赖于提取组而不是完全匹配；第二个利用前瞻和

  7. ruby-on-rails - 如何找出拦截 'method_missing' 的内容 - 2

    使用Ruby1.8.6/Rails2.3.2我注意到在我的任何ActiveRecord模型类上调用的任何方法都返回nil而不是NoMethodError。除了烦人之外，这还破坏了动态查找器(find_by_name、find_by_id等)，因为即使存在记录，它们也总是返回nil。不从ActiveRecord::Base派生的标准类不受影响。有没有办法追踪在ActiveRecord::Base之前拦截method_missing的是什么？更新:切换到1.8.7后，我发现(感谢@MichaelKohl)will_paginate插件首先处理method_missing。但是will_pa

  8. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  9. ruby-on-rails - 如何在 ActionController::TestCase 请求中设置内容类型 - 2

    我试图像这样在我的测试用例中执行获取:request.env['CONTENT_TYPE']='application/json'get:index,:application_name=>"Heka"虽然，它失败了:ActionView::MissingTemplate:Missingtemplatealarm_events/indexwith{:handlers=>[:builder,:haml,:erb,:rjs,:rhtml,:rxml],:locale=>[:en,:en],:formats=>[:html]尽管在我的Controller中我有:respond_to:html,

  10. ruby - 为 capybara 设置 app_host 的内容 - 2

    我的测试尝试访问网页并验证页面上是否存在某些元素。例如，它访问http://foo.com/homepage.html并检查Logo图像，然后访问http://bar.com/store/blah.html并检查页面上是否出现了某些文本。我的目标是访问经过Kerberos身份验证的网页。我发现Kerberos代码如下:主文件uri=URI.parse(Capybara.app_host)kerberos=Kerberos.new(uri.host)@kerberos_token=kerberos.encoded_tokenkerberos.rb文件classKerberosdefini

随机推荐