Feature Request: Improve SEO

[Igor Guastalla]

Right now the framework isn't showing up at Google search, and has no metas for this.
This issue is to suggest adding some of it, like NES.css:

<link rel="shortcut icon" type="image/png" href="favicon.png">
<link rel="shortcut icon" sizes="196x196" href="favicon.png">
<link rel="apple-touch-icon" href="favicon.png">
<meta property="og:type" content="website" />
<meta property="og:title" content="NES.css" />
<meta property="og:url" content="https://nostalgic-css.github.io/NES.css/" />
<meta property="og:description" content="NES-style CSS Framework \| ファミコン風CSSフレームワーク" />
<meta property="og:image" content="https://user-images.githubusercontent.com/5305599/49061716-da649680-f254-11e8-9a89-d95a7407ec6a.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@bc_rikko" />
<meta name="twitter:creator" content="@bc_rikko" />
<meta name="twitter:image" content="https://user-images.githubusercontent.com/5305599/49061716-da649680-f254-11e8-9a89-d95a7407ec6a.png" />
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-41640153-4"></script>
<script>window.dataLayer=window.dataLayer\|\|[];function gtag(){dataLayer.push(arguments);}gtag("js", new Date());gtag("config", "UA-41640153-4");</script>

Maybe add sitemap.xml and robots.txt as well.

Also we could add some share buttons like share on twitter/facebook.

If you want I can do some of the stuff, but some (like google stuff) it`s better if you do it, because some of it needs an google account.

But the issue that I`m saying here is that make the framework easier to people find it.

[micah5]

I've never really dealt with SEO optimisation, so this is really new to me. But I agree, it would be much better if the demo page was accessible via Google so I'll look into it.

I'm guessing that I'll need to dive into Google Analytics?

[Igor Guastalla]

I don't have a lot of knowledge about this as well, so I may be wrong, but I think is:

1. Add the metas I described above. The favicon can be any the Psone logo. It just need a png image with a transparent background. You can use favicon generator websites like this.
2. Add Google Analytics
3. Add Google Search Console. I mostly use the HTML meta tag verification.
4. Add sitemap.xml in the root of your project, example:

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://micah5.github.io/PSone.css/</loc>
<lastmod>2019-02-24</lastmod>
<changefreq>monthly</changefreq>
<priority>1.0</priority>
</url>
</urlset>

5. Add robots.txt in the root of your project, example:

# Rule 1
User-agent: Googlebot
Disallow: /nogooglebot/

# Rule 2
User-agent: *
Allow: /

Sitemap: https://micah5.github.io/PSone.css/sitemap.xml

That's all I got 😄

You could also use Google Tag Manager but I don't know much about it either, I'm still looking into it.

[micah5]

Thanks! I've added everything you suggested and verified the tag with Google Search Console.

I'll leave this issue open for now though since I'm sure I've missed something (and I'm not sure how sitemap.xml and robots.txt are supposed to work yet- I've just used your examples)

[Jose Diaz]

Also about SEO should be good to add microdata references to the rest of the content if needed.

You can look for them at https://schema.org/docs/gs.html