diff --git a/package.json b/package.json
index 3b56a9d..b478865 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "format": "yarn prettier -w ./src"
   },
   "devDependencies": {
-    "astro": "^0.20.12",
+      "astro": "^0.20.12",
     "cypress": "^8.3.1",
     "prettier": "^2.4.1",
     "prettier-plugin-astro": "^0.0.9"
diff --git a/src/SEO.astro b/src/SEO.astro
index b976254..b31b2ff 100644
--- a/src/SEO.astro
+++ b/src/SEO.astro
@@ -1,4 +1,11 @@
 ---
+import OpenGraphArticleTags from "./components/OpenGraphArticleTags.astro";
+import OpenGraphBasicTags from "./components/OpenGraphBasicTags.astro";
+import OpenGraphImageTags from "./components/OpenGraphImageTags.astro";
+import OpenGraphOptionalTags from "./components/OpenGraphOptionalTags.astro";
+import ExtendedTags from "./components/ExtendedTags.astro";
+import TwitterTags from "./components/TwitterTags.astro";
+
 export interface Link extends HTMLLinkElement {
   prefetch: boolean;
 }
@@ -58,8 +65,7 @@ export interface Props {
 }
 
 const { props } = Astro;
-const { title, description, canonical, noindex, nofollow, openGraph, extend } =
-  props;
+const { title, description, canonical, noindex, nofollow } = props;
 
 function validateProps(props) {
   const { openGraph, description } = props;
@@ -94,149 +100,6 @@ function validateProps(props) {
 }
 
 validateProps(props);
-
-function generateOpenGraphBasicTags(props: Props) {
-  if (props.openGraph) {
-    return (
-      <Fragment>
-        <meta property="og:title" content={openGraph.basic.title} />
-        <meta property="og:type" content={openGraph.basic.type} />
-        <meta property="og:image" content={openGraph.basic.image} />
-        <meta property="og:url" content={openGraph.basic.url} />
-      </Fragment>
-    );
-  } else {
-    return null;
-  }
-}
-
-function generateOpenGraphOptionalTags(props: Props) {
-  if (openGraph && openGraph.optional) {
-    return (
-      <Fragment>
-        {openGraph.optional.audio ? (
-          <meta property="og:audio" content={openGraph.optional.audio} />
-        ) : null}
-        {openGraph.optional.description ? (
-          <meta
-            property="og:description"
-            content={openGraph.optional.description}
-          />
-        ) : null}
-        {openGraph.optional.determiner ? (
-          <meta
-            property="og:determiner"
-            content={openGraph.optional.determiner}
-          />
-        ) : null}
-        {openGraph.optional.locale ? (
-          <meta property="og:locale" content={openGraph.optional.locale} />
-        ) : null}
-        {openGraph.optional.localeAlternate?.map((locale) => (
-          <meta property="og:locale:alternate" content={locale} />
-        ))}
-        {openGraph.optional.siteName ? (
-          <meta property="og:site_name" content={openGraph.optional.siteName} />
-        ) : null}
-        {openGraph.optional.video ? (
-          <meta property="og:video" content={openGraph.optional.video} />
-        ) : null}
-      </Fragment>
-    );
-  } else {
-    return null;
-  }
-}
-
-function generateOpenGraphImageTags(props: Props) {
-  if (props.openGraph?.image) {
-    const { url, secureUrl, type, width, height, alt } = props.openGraph.image;
-    return (
-      <Fragment>
-        <meta property="og:image:url" content={openGraph.basic.image} />
-        {secureUrl ? (
-          <meta property="og:image:secure_url" content={secureUrl} />
-        ) : null}
-        {type ? <meta property="og:image:type" content={type} /> : null}
-        {width ? <meta property="og:image:width" content={width} /> : null}
-        {!(height === null) ? (
-          <meta property="og:image:height" content={height} />
-        ) : null}
-        {!(alt === null) ? (
-          <meta property="og:image:alt" content={alt} />
-        ) : null}
-      </Fragment>
-    );
-  }
-}
-
-function generateOpenGraphArticleTags(props: Props) {
-  if (props.openGraph?.article) {
-    const {
-      publishedTime,
-      modifiedTime,
-      expirationTime,
-      authors,
-      section,
-      tags,
-    } = props.openGraph.article;
-    return (
-      <Fragment>
-        {publishedTime ? (
-          <meta property="article:published_time" content={publishedTime} />
-        ) : null}
-        {modifiedTime ? (
-          <meta property="article:modified_time" content={modifiedTime} />
-        ) : null}
-        {expirationTime ? (
-          <meta property="article:expiration_time" content={expirationTime} />
-        ) : null}
-        {authors
-          ? authors.map((author) => (
-              <meta property="article:author" content={author} />
-            ))
-          : null}
-        {section ? <meta property="article:section" content={section} /> : null}
-        {tags
-          ? tags.map((tag) => <meta property="article:tag" content={tag} />)
-          : null}
-      </Fragment>
-    );
-  }
-}
-
-function generateTwitterTags(props: Props) {
-  if (props.twitter) {
-    const { card, site, creator } = props.twitter;
-    return (
-      <Fragment>
-        {card ? <meta name="twitter:card" content={card} /> : null}
-        {site ? <meta name="twitter:site" content={site} /> : null}
-        {creator ? <meta name="twitter:creator" content={creator} /> : null}
-      </Fragment>
-    );
-  }
-}
-
-function generateExtendedTags(props: Props) {
-  if (props.extend) {
-    return (
-      <Fragment>
-        {props.extend.link?.map((attributes) => (
-          <link {...attributes} />
-        ))}
-        {props.extend.meta?.map(({ content, httpEquiv, name, property }) => (
-          <meta
-            content={content}
-            httpEquiv={httpEquiv}
-            name={name}
-            property={property}
-          />
-        ))}
-      </Fragment>
-    );
-  }
-}
 ---
 
 {title ? <title>{title}</title> : null}
@@ -249,9 +112,9 @@ function generateExtendedTags(props: Props) {
   name="robots"
   content={`${noindex ? "noindex" : "index"}, ${nofollow ? "nofollow" : "follow"}`} />
 
-{generateOpenGraphBasicTags(props)}
-{generateOpenGraphOptionalTags(props)}
-{generateOpenGraphImageTags(props)}
-{generateOpenGraphArticleTags(props)}
-{generateTwitterTags(props)}
-{generateExtendedTags(props)}
+{props.openGraph && <OpenGraphBasicTags {...props} />}
+{props.openGraph?.optional && <OpenGraphOptionalTags {...props} />}
+{props.openGraph?.image && <OpenGraphImageTags {...props} />}
+{props.openGraph?.article && <OpenGraphArticleTags {...props} />}
+{props.twitter && <TwitterTags {...props} />}
+{props.extend && <ExtendedTags {...props} />}
diff --git a/src/components/ExtendedTags.astro b/src/components/ExtendedTags.astro
new file mode 100644
index 0000000..0ccb7cc
--- /dev/null
+++ b/src/components/ExtendedTags.astro
@@ -0,0 +1,6 @@
+---
+const { props } = Astro;
+---
+
+{props.extend.link?.map((attributes) => <link {...attributes} />)}
+{props.extend.meta?.map( ({ content, httpEquiv, name, property }) => <meta content={content} httpEquiv={httpEquiv} name={name} property={property} /> )}
diff --git a/src/components/OpenGraphArticleTags.astro b/src/components/OpenGraphArticleTags.astro
new file mode 100644
index 0000000..31bb722
--- /dev/null
+++ b/src/components/OpenGraphArticleTags.astro
@@ -0,0 +1,10 @@
+---
+const { publishedTime, modifiedTime, expirationTime, authors, section, tags } = Astro.props.openGraph.article;
+---
+
+{publishedTime ? <meta property="article:published_time" content={publishedTime} /> : null}
+{modifiedTime ? <meta property="article:modified_time" content={modifiedTime} /> : null}
+{expirationTime ? <meta property="article:expiration_time" content={expirationTime} /> : null}
+{authors ? authors.map( (author) => <meta property="article:author" content={author} /> ) : null}
+{section ? <meta property="article:section" content={section} /> : null}
+{tags ? tags.map((tag) => <meta property="article:tag" content={tag} />) : null}
diff --git a/src/components/OpenGraphBasicTags.astro b/src/components/OpenGraphBasicTags.astro
new file mode 100644
index 0000000..b6b226c
--- /dev/null
+++ b/src/components/OpenGraphBasicTags.astro
@@ -0,0 +1,8 @@
+---
+const { openGraph } = Astro.props;
+---
+
+<meta property="og:title" content={openGraph.basic.title} />
+<meta property="og:type" content={openGraph.basic.type} />
+<meta property="og:image" content={openGraph.basic.image} />
+<meta property="og:url" content={openGraph.basic.url} />
diff --git a/src/components/OpenGraphImageTags.astro b/src/components/OpenGraphImageTags.astro
new file mode 100644
index 0000000..3973cf1
--- /dev/null
+++ b/src/components/OpenGraphImageTags.astro
@@ -0,0 +1,10 @@
+---
+const { url, secureUrl, type, width, height, alt } = Astro.props.openGraph.image;
+---
+
+<meta property="og:image:url" content={openGraph.basic.image} />
+{secureUrl ? <meta property="og:image:secure_url" content={secureUrl} /> : null}
+{type ? <meta property="og:image:type" content={type} /> : null}
+{width ? <meta property="og:image:width" content={width} /> : null}
+{!(height === null) ? <meta property="og:image:height" content={height} /> : null}
+{!(alt === null) ? <meta property="og:image:alt" content={alt} /> : null}
diff --git a/src/components/OpenGraphOptionalTags.astro b/src/components/OpenGraphOptionalTags.astro
new file mode 100644
index 0000000..bfec018
--- /dev/null
+++ b/src/components/OpenGraphOptionalTags.astro
@@ -0,0 +1,11 @@
+---
+const { optional } = Astro.props.openGraph;
+---
+
+{optional.audio ? <meta property="og:audio" content={optional.audio} /> : null}
+{optional.description ? <meta property="og:description" content={optional.description} /> : null}
+{optional.determiner ? <meta property="og:determiner" content={optional.determiner} /> : null}
+{optional.locale ? <meta property="og:locale" content={optional.locale} /> : null}
+{optional.localeAlternate?.map( (locale) => <meta property="og:locale:alternate" content={locale} /> )}
+{optional.siteName ? <meta property="og:site_name" content={optional.siteName} /> : null}
+{optional.video ? <meta property="og:video" content={optional.video} /> : null}
diff --git a/src/components/TwitterTags.astro b/src/components/TwitterTags.astro
new file mode 100644
index 0000000..5953452
--- /dev/null
+++ b/src/components/TwitterTags.astro
@@ -0,0 +1,7 @@
+---
+const { card, site, creator } = Astro.props.twitter;
+---
+
+{card ? <meta name="twitter:card" content={card} /> : null}
+{site ? <meta name="twitter:site" content={site} /> : null}
+{creator ? <meta name="twitter:creator" content={creator} /> : null}