search

postcss / postcss.org

Official website for PostCSS
https://postcss.org
MIT License
80 stars 49 forks source link

SEO optimized PostCSS home page content #199

Closed okonet closed 8 years ago

okonet commented 8 years ago

For some reason I'm seeing an Autoprefixer description here.

2016-03-15 at 10 23

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.

maxshearer commented 8 years ago

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.

marcustisater commented 8 years ago

{ property: "og:description", content: head.description } should do the trick. I can submit PR.

awayken commented 8 years ago

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.

thangngoc89 commented 8 years ago

@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

https://github.com/postcss/postcss.org/blob/b1af8cf1e4d1838d61c837eaf59a8fb3a679e91f/web_modules/layouts/HomePage/index.js#L42

twitter:description

and normal description too.

awayken commented 8 years ago

@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.

marcustisater commented 8 years ago

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.