fix: seo, package ver and env

- seo : - add meta tag - og images
aliefprihantoro · Nov 15, 2024 · 29b67ab · 29b67ab
1 parent 244df76
commit 29b67ab
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 27 deletions.
diff --git a/web/blogger/package.json b/web/blogger/package.json
@@ -12,13 +12,13 @@
   "dependencies": {
     "@astrojs/check": "^0.9.4",
     "@astrojs/tailwind": "^5.1.2",
-    "astro": "^4.16.6",
+    "astro": "^4.16.12",
     "loadmore": "workspace:^",
     "tailwindcss": "^3.4.14",
     "typescript": "^5.6.3",
     "ui": "workspace:^"
   },
   "devDependencies": {
-    "@muryp/vite-html": "^1.0.6"
+    "@muryp/vite-html": "^1.0.8"
   }
 }
diff --git a/web/blogger/src/component/Main.ts b/web/blogger/src/component/Main.ts
@@ -7,6 +7,8 @@ import listPost from './pages/List'
 import postContent from './pages/Post'
 import tags from './widget/tags'
 
+//TODO : link nav
+// seo (search engine crawl google, bing,etc)
 export default html`
   <html
     lang="en"
@@ -15,11 +17,7 @@ export default html`
     xmlns:data="http://www.google.com/2005/gml/data"
     xmlns:expr="http://www.google.com/2005/gml/expr">
     &lt;!--<head>
-      --&gt;&lt;head&gt;
-      <meta charset="utf-8" />
-      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-      <meta name="viewport" content="width=device-width, initial-scale=1" />
-      ${seo}
+      --&gt;&lt;head&gt; ${seo}
       <b:skin>
         <![CDATA[ @import
         url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Rokkitt:ital,wght@0,100..900;1,100..900&display=swap');
@@ -31,7 +29,7 @@ export default html`
       --&gt;&lt;body&gt; ${Layout(`
         <b:if cond='data:blog.pageType != "error_page"'>
           ${tags}
-          <b:if cond='data:blog.pageType != "item"'>
+          <b:if cond='data:blog.pageType == "archive"'>
           ${listPost}
           </b:if>
           ${MainWidget({ postContent })}

diff --git a/web/blogger/src/component/seo.ts b/web/blogger/src/component/seo.ts
@@ -1,13 +1,74 @@
+const FB_ID = 'alifprihantoro'
+const IMG_URL =
+  'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0s35S6K3n6U11iGP0yAlwh5XSV8WYSmZGenleDTIR64hoeD-5uoyk7g3Ih5KqY7QQVW_GiUcSZ3h1BiP0wJp6_kPPy_N9JYI8NGCBUho8zhZgXTf3onFvIN3_LYx-K2-7-P6lOGz_igD9yya6tDzPFCGkrzBBjoLvbdJYQ0-jUMjNqPKc4lqnnzS0AGc/s672/Screenshot_20241115-222638_1.jpg'
 export default html`
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <!-- tittle -->
   <b:if cond='data:blog.pageType == "index"'>
     <title><data:blog.pageTitle /> | News Tech</title>
-    <b:else />
-    <b:if cond='data:blog.pageType != "error_page"'>
-      <title><data:blog.pageName /> - <data:blog.title /></title>
-    </b:if>
   </b:if>
-  <b:if cond='data:blog.pageType == "error_page"'>
-    <title>Page Not Found - <data:blog.title /></title>
+  <b:if cond="data:view.isSingleItem">
+    <title><data:blog.pageName/> | <data:blog.metaDescription/></title>
+    <b:elseif cond="data:view.isHomepage" />
+    <title><data:blog.title/> | <data:blog.metaDescription/></title>
+    <b:elseif cond="data:view.search.label" />
+    <title><data:blog.pageTitle/> | <data:blog.metaDescription/></title>
+    <b:elseif cond="data:view.search.query" />
+    <title>
+      <data:view.search.resultsMessage/> | <data:blog.metaDescription/>
+    </title>
+    <b:elseif
+      cond="data:view.search and !data:view.search.label and !data:view.search.query" />
+    <title><data:blog.pageTitle/> | <data:blog.metaDescription/></title>
+    <b:elseif cond="data:view.isArchive" />
+    <title>
+      <data:view.archive.rangeMessage/> | <data:blog.metaDescription/>
+    </title>
+    <b:elseif cond="data:view.isError" />
+    <title>404 - URL Tidak Ditemukan</title>
+  </b:if>
+  <!-- description -->
+  <b:if cond='data:blog.metaDescription != ""'>
+    <meta expr:content="data:blog.metaDescription" name="description" />
   </b:if>
   <link rel="icon" href="/favicon.ico" />
+  <!-- Facebook Open Graph Meta Tag -->
+  <b:if cond="data:view.isHomepage">
+    <b:if cond="data:view.isPost">
+      <b:if cond="data:view.isPage">
+        <b:if cond="data:blog.url">
+          <meta expr:content="data:blog.url" property="og:url" />
+        </b:if>
+        <meta expr:content="data:blog.title" property="og:site_name" />
+        <b:if cond="data:blog.pageName">
+          <meta
+            expr:content="data:blog.pageName"
+            property="og:title" /> </b:if></b:if></b:if
+  ></b:if>
+  <meta content="blog" property="og:type" />
+  <b:if cond="data:blog.postImageUrl">
+    <meta expr:content="data:blog.postImageUrl" property="og:image" />
+    <b:else />
+    <b:if cond="data:blog.postImageThumbnailUrl">
+      <meta expr:content="data:blog.postThumbnailUrl" property="og:image" />
+      <b:else />
+      <meta content="${IMG_URL}" property="og:image" /> </b:if
+  ></b:if>
+  <b:if cond="data:blog.metaDescription">
+    <meta expr:content="data:blog.metaDescription" property="og:description" />
+    <b:else />
+    <meta expr:content="data:post.snippet" property="og:description" />
+  </b:if>
+  <meta expr:content="data:blog.title" property="og:site_name" />
+  <meta content="https://www.facebook.com/${FB_ID}" property="article:author" />
+  <meta
+    content="https://www.facebook.com/${FB_ID}"
+    property="article:publisher" />
+  <meta content="${FB_ID}" property="fb:admins" />
+  <meta content="${FB_ID}" property="fb:app_id" />
+  <meta content="en_US" property="og:locale" />
+  <meta content="en_GB" property="og:locale:alternate" />
+  <meta content="id_ID" property="og:locale:alternate" />
 `
diff --git a/web/blogger/src/component/widget/main.ts b/web/blogger/src/component/widget/main.ts
@@ -32,9 +32,12 @@ export default function MainWidget({ postContent }: TArgs) {
           </b:if>
         </b:includable>
         <b:includable id="post" var="post">
-          <b:if cond='data:blog.pageType == "item"'> ${postContent} </b:if>
+          <b:if
+            cond='data:blog.pageType == "item" || data:blog.pageType == "static_page"'>
+            ${postContent}
+          </b:if>
         </b:includable>
       </b:widget>
     </b:section>
   `
-}
+}
diff --git a/web/blogger/src/env.d.ts b/web/blogger/src/env.d.ts
@@ -1,13 +1,3 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="vite/client" />
-declare global {
-  function html(
-    e: TemplateStringsArray,
-    ...a: Array<string | number | (string | number)[]>
-  ): string
-  type Targs = {
-    name?: string
-    type?: string
-  }
-}
-export {}
+import '@muryp/vite-html/type'