docs: Improve meta tags & SEO (#81)

manosim · web-flow · commit 07bfb79273d5 · 2022-02-10T12:00:06.000Z
* docs: Improve meta tags

* chore: Fix path for SEO
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -8,7 +8,7 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 const config = {
   title: 'React Native Owl',
   tagline: 'Visual Regression Testing for React Native',
-  url: 'https://formidable.com/',
+  url: 'https://formidable.com',
   baseUrl: '/open-source/react-native-owl/',
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
@@ -50,7 +50,7 @@ const config = {
       },
       announcementBar: {
         id: 'announcement-blogpost',
-        content: `Read the announcement "<strong><a target="_blank" rel="noopener noreferrer" href="/blog/2022/react-native-owl/">We're Building a Visual Regression Testing Library for React Native</a></strong>" in our blog.`,
+        content: `Read the announcement "<strong><a target="_blank" href="/blog/2022/react-native-owl/">We're Building a Visual Regression Testing Library for React Native</a></strong>" in our blog.`,
         isCloseable: false,
       },
       navbar: {
diff --git a/website/src/components/HomepageFeatures/index.tsx b/website/src/components/HomepageFeatures/index.tsx
@@ -33,22 +33,26 @@ const FeatureList = [
   },
 ];
 
-export const HomepageFeatures = () => {
-  return FeatureList.map(({ title, description, imageSource }, idx) => {
-    return (
-      <section key={idx} className={styles.feature}>
-        <h2 className={styles.title}>{title}</h2>
-        <p className={styles.subtitle}>{description}</p>
+export const HomepageFeatures: React.FC = () => {
+  return (
+    <>
+      {FeatureList.map(({ title, description, imageSource }, idx) => {
+        return (
+          <section key={idx} className={styles.feature}>
+            <h2 className={styles.title}>{title}</h2>
+            <p className={styles.subtitle}>{description}</p>
 
-        <div>
-          {!!imageSource && (
-            <img
-              src={`/open-source/react-native-owl${imageSource}`}
-              className={styles.sectionImageMockup}
-            />
-          )}
-        </div>
-      </section>
-    );
-  });
+            <div>
+              {!!imageSource && (
+                <img
+                  src={`/open-source/react-native-owl${imageSource}`}
+                  className={styles.sectionImageMockup}
+                />
+              )}
+            </div>
+          </section>
+        );
+      })}
+    </>
+  );
 };
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -4,11 +4,15 @@ import Layout from '@theme/Layout';
 import { Hero } from '../components/Hero';
 import { HomepageFeatures } from '../components/HomepageFeatures';
 
+const META_DESCRIPTION =
+  'React Native Owl is a visual regression testing library for React Native that enables developers to introduce visual regression tests to their apps for iOS and Android.';
+
 export default function Home() {
   return (
     <Layout
+      image="/images/homepage/social.png"
       title="Visual Regression Testing"
-      description="Description will go into a meta tag in <head />"
+      description={META_DESCRIPTION}
       wrapperClassName="homepage"
     >
       <Hero />
@@ -24,16 +28,15 @@ export default function Home() {
           tests locally and on your preferred CI service, seamless.
         </p>
 
-        {/* REMOVE INITIALLY AS THIS WILL BE DEPLOYED BEFORE THE BLOG IN PUBLISHED
-        <p>
+        <p className="intro">
           Learn more about the background behind this library in{' '}
-          <a href="https://formidable.com/blog/" target="_blank">
+          <a href="/blog/2022/react-native-owl/" target="_blank">
             the announcement on the Formidable Blog
           </a>
           .
-        </p> */}
+        </p>
 
-        <p>
+        <p className="intro">
           <em>
             Note: This library is{' '}
             <a href="/docs/introduction/work-in-progress">work-in-progress</a>.
diff --git a/website/static/images/social.png b/website/static/images/social.png
