较长的内部样式表会影响 SEO 吗？
我正在构建一个网站，页面之间有很多类似的 css。我决定一个好的方法是通过 php 函数（带参数）将 css 生成为字符串，并在我服务的每个页面中作为内部样式表输出。好处：
- 这样，如果我进行更改，它将反映在整个网站中，而无需维护重复项，
- 我可以只发送某个页面所需的 css，
- 这比使用小 css 文件并在包含时发送大量 css 标头要好
- 。在样式表加载之前显示内容的可能性消失了
- 我可以使用参数计算尺寸
- 我可以创建一个图层来缩小从这些函数收到的结果或提供缓存的缩小的CSS，
不幸的是我在其他地方没有看到这样做所以我想这可能是因为搜索引擎优化。生成的内部样式表最大约为 15kb（在缩小样式表之前）。
我需要您对这种方法的看法，以及您对长内部样式表对 SEO 影响的看法。
非常感谢。
I'm building a site with a lot of similar css between pages. I've decided that a good approach would be to have the css generated as strings by php functions (with parameters) and outputed as an internal stylesheet in every page that i serve. The benefits:
- this way if i make a change it will reflect throughout the entire site without having to maintain duplicates
- i can send only the necessary css for a certain page
- it's better than having small css files and sending a lot of css headers at inclusion
- the possibility that the content might be displayed before the stylesheet is loaded is gone
- i can calculate dimensions by using parameters
- i can create a layer that will minify the result received from these functions or serve cached minified css
I haven't seen this done anywhere else unfortunately so i'm thinking that this might be because of SEO. The generated internal stylesheet will be at around 15kb max (before minifying the stylesheet).
I need your opinion on this approach and your thoughts about the impact a long internal stylesheet will have on SEO.
Many thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
不是你问题的答案（这很有趣！），但你关于内联 CSS 的大多数论点都是错误的。外部样式表始终是更好更快的解决方案。
第一点可以通过在样式表的文件名中添加版本号来处理
第二点没有实际意义，因为外部文件被缓存，所以没有额外的请求
第三点由于同样的原因没有意义
一旦样式表被缓存，第四点就不再重要
第五点可以使用排序内联CSS仅用于需要的属性
动态更新 - 通常是整个 CSS 代码库的一小部分
我不明白的第六点。
寻找外部样式表。只需确保它使用正确的缓存标头即可！
Not an answer to your question (which is interesting enough!), but most of your arguments for inline CSS are wrong. An external style sheet is always the better and faster solution.
The first point you can handle by adding a version number to the style sheet's file name
The second point is moot because an external file gets cached, so no additional requests
The third point is moot for the same reason
The fourth point won't really matter once the style sheet is cached
The fifth point can be sorted using inline CSS for only the properties that need to be
updated dynamically - usually a tiny fraction of the whole CSS code base
The sixth point I don't get.
Go for an external style sheet. Just make sure it gets served with the correct caching headers!
就像长的内联 JavaScript 块一样，它们会被忽略。
机器人查看的是内容，而不是布局。如果您想要更好地展示他们所看到的内容，请尝试 Lynx 浏览器。
不幸的是，它们也不会像外部 CSS 和 JS 那样缓存在用户的浏览器上，从而使每个页面加载速度变慢。实际上，拥有一个大型外部样式表比在每个页面上提供相关的“css 片段”更有效。
Like long blocks of inline JavaScript, they are ignored.
Bots look at the content, not the layout. If you want a better representation of what they see, try the Lynx browser.
Unfortunately they will not be cached on the user's browser either, as external CSS and JS are, making each page load slower. It is actually more efficient to have a large external stylesheet than server up related "css snippets" with each page.
假设“内部样式表”是指使用
尽管为当前页面提供 CSS 或将 CSS 拆分为许多不同的特定于页面的样式表似乎更有效；实际上，通常只有一个样式表会更好。提供这种压缩的服务并使用适当的过期标头几乎总是比替代方案更快。
关于SEO，机器人会忽略CSS，所以这不会有任何影响。如果你有太多的 CSS 以至于大大减慢了页面的加载速度，理论上你可能会开始遇到问题，但你需要大量的内联 CSS，然后这才可能成为一个问题。
Assuming by 'internal stylesheet' you mean inline CSS included using the
<style>tag, I'd recommend against this. If you use an external stylesheet, visitors download it once on the first request, and it will then be cached. By including all of your CSS inline, you're adding page weight to every single HTML request.Although it might seem more efficient to just serve CSS for the current page, or split your CSS into lots of different page-specific stylesheets; in practice it's usually better just to have one stylesheet. Serving this compressed and with appropriate expires headers will almost always be faster than the alternatives.
Regarding SEO, robots ignore CSS, so this won't have any affect. If you had so much CSS that it substantially slowed down loading of your page, in theory you might start having issues, but you would need an inhuman amount of inline CSS before this could even potentially be an issue.
据我所知，你的CSS表在SEO中起的作用很小，更重要的是你的HTML标记和执行。
按照 '< 的顺序h1> - < h5>'对于您的标题标签，附带 '<; p>'标签而不是 '<;字体>'或类似的方法将影响网络爬虫识别页面内容并确定其优先级的能力。
虽然您可以使用 CSS 来隐藏只想出现在搜索引擎中的段落以及类似的技术，但与 HTML 结构相比，它并不重要。
To the extent of my knowledge, your CSS sheet plays a minimal role in SEO, what is more important is your HTML markup and execution.
Following the order of '< h1 > - < h5 >' for your heading tags, with accompanying '< p >' tags instead of '< font >' or similar approaches is what will effect a web crawlers ability to recognise and prioritise the content in your page.
While you can use CSS to hide paragraph that you only want to appear in search engines and similar techniques it has little importance compared to the HTML structure.
您所说的所有好处都适用。搜索引擎不太关心CSS和javascript（当然，如果你的页面换行发送时间太长，这会影响，但我不认为是这样）。
我以前见过这种解决方案，但人们往往会避免使用脚本来提供服务，一旦您可以使用媒体查询来代替，只需编写一个外部样式表。我认为你应该看看这个。
但是，我看到您正在尝试优化发送的 CSS。这很好，但是谈论所有工作表的 80k，让我思考你是否没有使规则过于复杂化。
好吧，作为最后的意见，您可以缓存许多不同的响应并利用页面头部的“规范”内容。
All benefits you said apply. Search engines doesn't care too much about CSS and javascript (of course, if your page takes too long to wrap and send, this will affect, but I don't think it is the case).
I've seen this kind of solution before, but people tend to avoid use scripting to serve, once you can use media queries instead, writing just only one external stylesheet. I think you should take a look on this.
However, I see you are trying to optimize the CSS sent. This is good, but talking about 80k for all sheets, makes me think if you are not over complicating the rules.
Well, as last opinion, you can cache many different responses and make use of "canonical" thing on page head.