Implement initial SEO strategy for beta site launch

[jessicaschilling]

Add basic metadata to each content page so friendly links for social media cards work -- see https://vuepress.vuejs.org/guide/frontmatter.html for info on VuePress frontmatter

• Remember titles get truncated on Twitter at 70 chars
• Field: description is critical. It's actually the description sub-field inside the meta field. Shorter the better, but no more than circa 150 chars (or 200 if absolutely necessary)
• Is it possible using frontmatter to include an image for articles? Investigate and if it's not possible within time scale, break out into a separate issue. @ericronne will make a social card image and we can personalize further later for key topic pages

More info about the meta tags used in Twitter/Facebook social cards (including how to specify images) is here.

[cwaring]

I'll experiment with this plugin to see if it can generate acceptable results.

[jessicaschilling]

I’m happy to take a manual first pass so this can free up your time for other efforts, @cwaring. It’s on my list for today.

[jessicaschilling]

Combed through https://htmlhead.dev/ and am implementing the following meta tags in ipfs/ipfs-docs#36 as a combination of front matter (for tags that depend on the original page) and head.js (for tags that are consistent sitewide).

GLOBAL:

<meta name=“keywords” content=“some, keywords”>
<meta name="description" content="A description of the page limited to 150 char>
<meta name="subject" content="your document's subject">

FACEBOOK - sharing debugger at https://developers.facebook.com/tools/debug/sharing/

<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:image:alt" content="A description of what is in the image (not a caption)">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">

TWITTER - card validator at https://cards-dev.twitter.com/validator

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
<meta name="twitter:image:alt" content="A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters.">

QQ/WECHAT:

<meta itemprop="name" content="share title">
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png">

For future reference: Here's the block of front matter to include in new pages.

meta:
  - name: twitter:title
    content: IPFS Docs - page title
  - property: og:title
    content: IPFS Docs - page title
  - itemprop: name
    content: IPFS Docs - page title
  - name: description
    content: description of this page less than 150 char
  - name: twitter:description
    content: description of this page less than 150 char
  - property: og:description
    content: description of this page less than 150 char

[jessicaschilling]

Closed via ipfs/ipfs-docs#47 !