SEO optimized PostCSS home page content
okonet opened this issue · 6 comments
For some reason I'm seeing an Autoprefixer description here.
This also applies to search results: https://duckduckgo.com/?q=postcss&ia=about
It seems to happen since it's the first meaningful content on the page. I think we should add a bit longer explanation to the page between examples and the header. This should serve 2 purposes: fixes SEO issues and also explain a bit more what PostCSS is.
Missing both <meta name="description" content="..."> and <meta property="og:description" content="..."> which should do the trick.
And on that note, if we're doing that we might as well add the Twitter OG tags in too.
{ property: "og:description", content: head.description } should do the trick. I can submit PR.
Is anyone working on this? I decided to give it a look, since it looked like an easy enough PR to submit. The content/index.md file is missing copy for a description field, so I took a shot at writing something for it:
Transform CSS with the power of JavaScript. Auto-prefixing, future CSS syntaxes, modules, linting and more are possible with over hundreds of PostCSS plugins.
Thoughts? It's short to adhere to the 160 character rule for meta descriptions, but it still references most of the homepage copy.
@awayken I'm not familiar enough with PostCSS to have comment about the description. But if you did a PR for this. Remember to uncomment these lines
twitter:description
and normal description too.
@thangngoc89 I think I'm good there. I took out the comments and added { name: "description", content: head.description }, for the normal description. The HTML showed up but the content was blank. That lead me down into the content folder, where I noticed there was no description to output.
Description text looks good, submit a PR and we can review it from there.
Have a look at https://github.com/postcss/postcss.org/blob/master/web_modules/layouts/Page/index.js that's the most recent one I updated with description meta tags.