Skip to content

Commit

Permalink
update og image
Browse files Browse the repository at this point in the history
  • Loading branch information
gustavoquinalha committed Jul 16, 2024
1 parent a6ec65b commit fc9bf45
Show file tree
Hide file tree
Showing 7 changed files with 146 additions and 52 deletions.
6 changes: 3 additions & 3 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down
36 changes: 20 additions & 16 deletions src/app/app.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
Expand Down Expand Up @@ -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(''));
}
Expand All @@ -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 ?? '',
});
}

Expand Down
3 changes: 2 additions & 1 deletion src/app/components/menu/menu.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) { }
Expand Down
122 changes: 112 additions & 10 deletions src/app/components/preview/preview.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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"
/>
Expand All @@ -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"
/>
Expand All @@ -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"
/>
Expand All @@ -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>
19 changes: 0 additions & 19 deletions src/app/metadata.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
})
Expand Down
6 changes: 6 additions & 0 deletions src/app/utils/code.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ export function returnCode(data) {
data = {
charset: '',
viewport: '',
name: '',
title: '',
description: '',
canonical: '',
Expand Down Expand Up @@ -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">
Expand Down
6 changes: 3 additions & 3 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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" />

Expand Down

0 comments on commit fc9bf45

Please sign in to comment.