update og image

gustavoquinalha · gustavoquinalha · commit fc9bf454e4c6 · 2024-07-16T19:56:16.000-03:00
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -22,9 +22,9 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-white">
 
             <div
               *ngIf="field.name === 'image' && form?.get('image')"
-              class="w-full min-h-60 rounded bg-zinc-800 border border-zinc-800 overflow-hidden"
+              class="w-full aspect-[1.91/1] rounded bg-zinc-800 border border-zinc-800 overflow-hidden"
             >
-              <img *ngIf="form?.get('image')?.value" [src]="form.get('image')?.value" width="100%" alt="" />
+              <img *ngIf="form?.get('image')?.value" [src]="form.get('image')?.value" class="aspect-[1.91/1]" width="100%" alt="" />
             </div>
 
             <div class="relative w-full">
@@ -49,7 +49,7 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-white">
               </ng-container>
               <ng-container class="" *ngIf="field.name === 'favicon'">
                 <div class="w-5 min-w-5 h-5 rounded-full absolute top-1.5 right-1.5 bg-zinc-800 border border-zinc-800 overflow-hidden">
-                  <img *ngIf="form?.get('favicon')?.value" [src]="form.get('favicon')?.value" width="100%" alt="Favicon" class="w-6 min-w-6 h-6" />
+                  <img *ngIf="form?.get('favicon')?.value" [src]="form.get('favicon')?.value" width="100%" alt="Favicon" class="w-5 min-w-5 h-5" />
                 </div>
               </ng-container>
             </div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -47,10 +47,11 @@ export class AppComponent {
       ],
     },
     { name: 'viewport', type: 'text', description: 'Controls the layout and scaling of a webpage on different devices, improving responsiveness and user experience.', label: 'Viewport' },
+    { name: 'name', type: 'text', description: 'Defines the name of the page.', label: 'Site name' },
     { name: 'title', type: 'text', description: 'Defines the title of the HTML document, displaying text in the browser tab and aiding in search engine optimization (SEO).', label: 'Title' },
     { name: 'description', type: 'text', description: 'Provides a concise summary of the webpages content, often used by search engines to display in search results, enhancing click-through rates.', label: 'Description' },
     { name: 'canonical', type: 'text', description: 'Specifies the preferred URL for a webpage, consolidating search engine ranking signals and avoiding duplicate content issues.', label: 'Canonical URL' },
-    { name: 'image', type: 'text', description: 'Specifies the image displayed when sharing the webpage on platforms like Facebook, enhancing visual appeal.', label: 'Image URL' },
+    { name: 'image', type: 'text', description: `Specifies the image displayed when sharing the webpage on platforms like Facebook, enhancing visual appeal. Og:images should have an aspect ratio of 1.91:1. This means that the width should be 1.9 X the height to avoid cropping issues. Your image shouldn't be larger than 8MB. Image size should be 1200 X 630 pixels (px).`, label: 'Image URL' },
     { name: 'imageAlt', type: 'text', description: 'Provides alternative text for the image specified in og:image, improving accessibility and SEO when shared on platforms supporting Open Graph.', label: 'Image alt text' },
     { name: 'favicon', type: 'text', description: 'Specifies the favicon, enhancing website recognition in browsers and bookmarks.', label: 'Favicon' },
     { name: 'color', type: 'text', description: 'Defines the color theme for the browsers UI elements when a webpage is viewed on mobile devices, enhancing user experience and brand consistency.', label: 'Theme color' },
@@ -85,6 +86,8 @@ export class AppComponent {
     this.metatagsList.forEach(field => {
       if (field.type === 'select' && field.options) {
         this.form.addControl(field.name, this.fb.control(field.options[0].value));
+      } else if (field.name === 'viewport') {
+        this.form.addControl(field.name, this.fb.control('width=device-width, initial-scale=1'));
       } else {
         this.form.addControl(field.name, this.fb.control(''));
       }
@@ -102,21 +105,22 @@ export class AppComponent {
 
   setFetchValue(data: any) {
     this.form.patchValue({
-      charset: data.charset,
-      viewport: data.viewport,
-      title: data.title,
-      description: data.description,
-      canonical: data.canonicalURL,
-      image: data.imageURL,
-      imageAlt: data.imageAltText,
-      favicon: data.favicon,
-      color: data.themeColor,
-      author: data.pageAuthor,
-      robots: data.robots,
-      googlebot: data.googlebot,
-      sitemap: data.sitemap,
-      locale: data.locale,
-      site: data.pageSite,
+      charset: data.charset ?? '',
+      viewport: data.viewport ?? '',
+      name: data.name ?? '',
+      title: data.title ?? '',
+      description: data.description ?? '',
+      canonical: data.canonicalURL ?? '',
+      image: data.imageURL ?? '',
+      imageAlt: data.imageAltText ?? '',
+      favicon: data.favicon ?? '',
+      color: data.themeColor ?? '',
+      author: data.pageAuthor ?? '',
+      robots: data.robots ?? '',
+      googlebot: data.googlebot ?? '',
+      sitemap: data.sitemap ?? '',
+      locale: data.locale ?? '',
+      site: data.pageSite ?? '',
     });
   }
 
diff --git a/src/app/components/menu/menu.component.ts b/src/app/components/menu/menu.component.ts
@@ -9,7 +9,8 @@ import { MetadataService } from 'src/app/metadata.service';
 })
 export class MenuComponent {
   @Output() onFetchValue = new EventEmitter<string>();
-  url: string = 'https://gus.vision/';
+  url: string = 'https://seotopper.netlify.app/';
+  // url: string = 'https://gus.vision/';
   loading = signal(false);
 
   constructor(private metadataService: MetadataService) { }
diff --git a/src/app/components/preview/preview.component.html b/src/app/components/preview/preview.component.html
@@ -3,7 +3,9 @@
 >
   <div class="w-full max-w-xl">
     <div class="text-xs text-white uppercase mb-2">Google</div>
-    <div class="w-full p-4 border border-zinc-800 rounded overflow-hidden bg-zinc-900">
+    <div
+      class="w-full p-4 border border-zinc-800 rounded overflow-hidden bg-zinc-900"
+    >
       <div class="text-base text-[#99c3ff]">
         {{ content?.title || "Page title" }}
       </div>
@@ -18,12 +20,16 @@
 
   <div class="w-full max-w-lg">
     <div class="text-xs text-white uppercase mb-2">Twitter</div>
-    <div class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900">
-      <div class="bg-zinc-800 w-full h-64 min-h-64 overflow-hidden border-b border-zinc-800">
+    <div
+      class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900"
+    >
+      <div
+        class="bg-zinc-800 w-full overflow-hidden border-b border-zinc-800 relative pt-[52.33%]"
+      >
         <img
           *ngIf="content?.image"
           [src]="content?.image"
-          class="border-0 outline-none w-full min-h-64 h-64 object-cover object-center"
+          class="border-0 outline-none w-full h-full absolute top-0 object-cover object-center"
           width="100%"
           [alt]="content?.imageAlt"
         />
@@ -44,12 +50,16 @@
 
   <div class="w-full max-w-lg">
     <div class="text-xs text-white uppercase mb-2">Facebook</div>
-    <div class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900">
-      <div class="bg-zinc-800 w-full h-52 min-h-52 overflow-hidden border-b border-zinc-800">
+    <div
+      class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900"
+    >
+      <div
+        class="bg-zinc-800 w-full overflow-hidden border-b border-zinc-800 relative pt-[52.5%]"
+      >
         <img
           *ngIf="content?.image"
           [src]="content?.image"
-          class="border-0 outline-none w-full min-h-52 h-52 object-cover object-center"
+          class="border-0 outline-none w-full h-full absolute top-0 object-cover object-center"
           width="100%"
           [alt]="content?.imageAlt"
         />
@@ -70,12 +80,16 @@
 
   <div class="w-full max-w-xl">
     <div class="text-xs text-white uppercase mb-2">Linkedin</div>
-    <div class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900">
-      <div class="bg-zinc-800 w-full h-64 min-h-64 overflow-hidden border-b border-zinc-800">
+    <div
+      class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900"
+    >
+      <div
+        class="bg-zinc-800 w-full overflow-hidden border-b border-zinc-800 relative pt-[52.25%]"
+      >
         <img
           *ngIf="content?.image"
           [src]="content?.image"
-          class="border-0 outline-none w-full min-h-64 h-64 object-cover object-center"
+          class="border-0 outline-none w-full h-full absolute top-0 object-cover object-center"
           width="100%"
           [alt]="content?.imageAlt"
         />
@@ -91,5 +105,93 @@
     </div>
   </div>
 
+  <div class="w-full max-w-lg">
+    <div class="text-xs text-white uppercase mb-2">Discord</div>
+    <div
+      class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900"
+    >
+      <div class="w-full flex flex-col gap-2 p-4 border-l-4 border-zinc-700">
+        <div class="text-sm text-[#99c3ff] font-medium">
+          {{ content?.title || "Page title" }}
+        </div>
+        <div class="text-xs text-zinc-400">
+          {{ content?.description || "Page description" }}
+        </div>
+        <div class="bg-zinc-800 w-full overflow-hidden relative rounded mt-2">
+          <img
+            *ngIf="content?.image"
+            [src]="content?.image"
+            class="border-0 outline-none w-full h-full"
+            width="100%"
+            [alt]="content?.imageAlt"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="w-full max-w-lg">
+    <div class="text-xs text-white uppercase mb-2">Slack</div>
+    <div
+      class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900"
+    >
+      <div class="w-full flex flex-col gap-1 p-4 border-l-4 border-zinc-700">
+        <div class="flex gap-2 items-center">
+          <div
+            class="w-5 min-w-5 h-5 rounded-full bg-zinc-800 border border-zinc-800 overflow-hidden"
+          >
+            <img
+              *ngIf="content.favicon"
+              [src]="content.favicon"
+              width="100%"
+              alt="Favicon"
+              class="w-5 min-w-5 h-5"
+            />
+          </div>
+          <div class="text-xs text-zinc-400">
+            {{ content?.canonical || "https://pageurl.com" }}
+          </div>
+        </div>
+        <div class="text-sm text-[#99c3ff] font-medium">
+          {{ content?.title || "Page title" }}
+        </div>
+        <div class="text-xs text-zinc-400">
+          {{ content?.description || "Page description" }}
+        </div>
+        <div class="bg-zinc-800 w-full overflow-hidden relative rounded mt-2">
+          <img
+            *ngIf="content?.image"
+            [src]="content?.image"
+            class="border-0 outline-none w-full h-full"
+            width="100%"
+            [alt]="content?.imageAlt"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="w-full max-w-xl">
+    <div class="text-xs text-white uppercase mb-2">Pinterest</div>
+    <div class="w-full max-w-60">
+      <div
+        class="bg-zinc-800 w-full overflow-hidden border rounded border-zinc-800 relative pt-[52.25%]"
+      >
+        <img
+          *ngIf="content?.image"
+          [src]="content?.image"
+          class="border-0 outline-none w-full h-full absolute top-0 object-cover object-center"
+          width="100%"
+          [alt]="content?.imageAlt"
+        />
+      </div>
+      <div class="w-full flex flex-col gap-1 p-2">
+        <div class="text-xs text-white font-medium">
+          {{ content?.title || "Page title" }}
+        </div>
+      </div>
+    </div>
+  </div>
+
   <div class="hidden md:flex min-h-4 md:min-h-8"></div>
 </div>
diff --git a/src/app/metadata.service.ts b/src/app/metadata.service.ts
@@ -2,25 +2,6 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 
-// interface Metadata {
-//   charset?: string,
-//   viewport?: string,
-//   title?: string,
-//   description?: string,
-//   canonical?: string,
-//   canonicalURL?: string,
-//   image?: string,
-//   imageAlt?: string,
-//   favicon?: string,
-//   color?: string,
-//   author?: string,
-//   robots?: string,
-//   googlebot?: string,
-//   sitemap?: string,
-//   locale?: string,
-//   site?: string,
-// }
-
 @Injectable({
   providedIn: 'root'
 })
diff --git a/src/app/utils/code.js b/src/app/utils/code.js
@@ -3,6 +3,7 @@ export function returnCode(data) {
     data = {
       charset: '',
       viewport: '',
+      name: '',
       title: '',
       description: '',
       canonical: '',
@@ -31,6 +32,11 @@ export function returnCode(data) {
   <meta name="author" content="${data.author}">
   <meta name="theme-color" content="${data.color}">
 
+  <!-- Google Search Engine -->
+  <meta itemprop="name" content="${data.name}">
+  <meta itemprop="description" content="${data.description}">
+  <meta itemprop="image" content="${data.image}">
+
   <!-- Facebook Meta Tags -->
   <meta property="og:url" content="${data.canonical}">
   <meta property="og:type" content="website">
diff --git a/src/index.html b/src/index.html
@@ -24,23 +24,23 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <meta name="robots" content="index, follow">
     <meta name="googlebot" content="index, follow">
-    <meta name="description" content="An innovative tool designed to optimize your website's performance in search engines. Developed with cutting-edge technology, SEOTopper simplifies the SEO process, providing effective and efficient results to increase your business's online visibility." />
+    <meta name="description" content="Optimize your website's online presence with our intuitive and efficient tool. You can generate custom meta tags in seconds, ensuring your content is properly indexed and gains visibility in search engines." />
     <meta name="author" content="https://github.com/gustavoquinalha/" />
     <meta name="theme-color" content="#09090b" />
 
     <!-- Facebook Meta Tags -->
     <meta property="og:url" content="https://seotopper.netlify.app/" />
     <meta property="og:type" content="website" />
     <meta property="og:title" content="SeoTopper - SEO Generator" />
-    <meta property="og:description" content="An innovative tool designed to optimize your website's performance in search engines. Developed with cutting-edge technology, SEOTopper simplifies the SEO process, providing effective and efficient results to increase your business's online visibility." />
+    <meta property="og:description" content="Optimize your website's online presence with our intuitive and efficient tool. You can generate custom meta tags in seconds, ensuring your content is properly indexed and gains visibility in search engines." />
     <meta property="og:image" content="https://seotopper.netlify.app/assets/intro.webp" />
     <meta property="og:locale" content="pt-Br" />
 
     <!-- Twitter Meta Tags -->
     <meta name="twitter:card" content="summary" />
     <meta name="twitter:title" content="SeoTopper - SEO Generator" />
     <meta name="twitter:site" content="@gustavoquinalha" />
-    <meta name="twitter:description" content="An innovative tool designed to optimize your website's performance in search engines. Developed with cutting-edge technology, SEOTopper simplifies the SEO process, providing effective and efficient results to increase your business's online visibility." />
+    <meta name="twitter:description" content="Optimize your website's online presence with our intuitive and efficient tool. You can generate custom meta tags in seconds, ensuring your content is properly indexed and gains visibility in search engines." />
     <meta name="twitter:image" content="https://seotopper.netlify.app/assets/intro.webp" />
     <meta name="twitter:image:alt" content="SeoTopper Logo" />
 
