seo once again

src/pages/docs/index.js

@@ -2,6 +2,7 @@ import { graphql, StaticQuery } from "gatsby"
 import React from "react"
 import Layout from "../../components/layout"
 import DocsCard from "../../components/cards/docs"
+import bgImage from "../../media/phones.png"
 
 const DocsPage = () => {
 
@@ -33,3 +34,17 @@ const DocsPage = () => {
 }
 
 export default DocsPage
+
+
+export function Head() {
+    return (
+        <>
+            <title>Cloudstream 404</title>
+            <meta property="og:title" content="Cloudstream" />
+            <meta property="og:description" content="Cloudstream is an Android app for streaming and downloading Movies, TV-Series and Anime." />
+            <meta property="og:image" content={bgImage} />
+            <meta property="og:image:type" content="image/png" />
+            <meta name="twitter:card" content="summary_large_image" />            <meta name="google-site-verification" content="eJAZtihmv0cJwd54kImmb2IfwLskeCfyW7gEm_HgXd8" />
+        </>
+    )
+}

src/pages/index.js

@@ -39,6 +39,7 @@ export function Head() {
             <meta property="og:description" content="Cloudstream is an Android app for streaming and downloading Movies, TV-Series and Anime." />
             <meta property="og:image" content={bgImage} />
             <meta property="og:image:type" content="image/png" />
+            <meta name="twitter:card" content="summary_large_image" />
             <meta name="google-site-verification" content="eJAZtihmv0cJwd54kImmb2IfwLskeCfyW7gEm_HgXd8" />
         </>
     )

src/pages/install.js

@@ -82,6 +82,7 @@ export function Head() {
             <meta property="og:description" content="Cloudstream is an Android app for streaming and downloading Movies, TV-Series and Anime." />
             <meta property="og:image" content={bgImage} />
             <meta property="og:image:type" content="image/png" />
+            <meta name="twitter:card" content="summary_large_image" />
         </>
     )
 }

src/pages/repos.js

@@ -33,6 +33,7 @@ export function Head() {
             <meta property="og:description" content="Cloudstream is an Android app for streaming and downloading Movies, TV-Series and Anime." />
             <meta property="og:image" content={bgImage} />
             <meta property="og:image:type" content="image/png" />
+            <meta name="twitter:card" content="summary_large_image" />
         </>
     )
 }

src/templates/default.jsx

@@ -1,6 +1,7 @@
 import React from "react"
 import { Link, graphql } from "gatsby"
 import Layout from "../components/layout"
+import bgImage from "../media/phones.png"
 
 import rehypeReact from "rehype-react"
 
@@ -61,7 +62,15 @@ export default function PageTemplate({ data: { markdownRemark } }) {
 
 export function Head({data}) {
   return (
+    <>
       <title>{data.markdownRemark.frontmatter.title}</title>
+      <meta property="og:title" content={data.markdownRemark.frontmatter.title} />
+      <meta property="og:description" content={data.markdownRemark.excerpt} />
+      <meta property="og:image" content={bgImage} />
+      <meta property="og:image:type" content="image/png" />
+      <meta name="twitter:card" content="summary_large_image" />
+    </>
+
   )
 }
 
@@ -71,6 +80,7 @@ export const pageQuery = graphql`
       frontmatter {
         title
       }
+      excerpt
       htmlAst
     }
   }