Skip to content

Commit fc9bf45

Browse files
update og image
1 parent a6ec65b commit fc9bf45

File tree

7 files changed

+146
-52
lines changed

7 files changed

+146
-52
lines changed

src/app/app.component.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-white">
2222

2323
<div
2424
*ngIf="field.name === 'image' && form?.get('image')"
25-
class="w-full min-h-60 rounded bg-zinc-800 border border-zinc-800 overflow-hidden"
25+
class="w-full aspect-[1.91/1] rounded bg-zinc-800 border border-zinc-800 overflow-hidden"
2626
>
27-
<img *ngIf="form?.get('image')?.value" [src]="form.get('image')?.value" width="100%" alt="" />
27+
<img *ngIf="form?.get('image')?.value" [src]="form.get('image')?.value" class="aspect-[1.91/1]" width="100%" alt="" />
2828
</div>
2929

3030
<div class="relative w-full">
@@ -49,7 +49,7 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-white">
4949
</ng-container>
5050
<ng-container class="" *ngIf="field.name === 'favicon'">
5151
<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">
52-
<img *ngIf="form?.get('favicon')?.value" [src]="form.get('favicon')?.value" width="100%" alt="Favicon" class="w-6 min-w-6 h-6" />
52+
<img *ngIf="form?.get('favicon')?.value" [src]="form.get('favicon')?.value" width="100%" alt="Favicon" class="w-5 min-w-5 h-5" />
5353
</div>
5454
</ng-container>
5555
</div>

src/app/app.component.ts

+20-16
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,11 @@ export class AppComponent {
4747
],
4848
},
4949
{ name: 'viewport', type: 'text', description: 'Controls the layout and scaling of a webpage on different devices, improving responsiveness and user experience.', label: 'Viewport' },
50+
{ name: 'name', type: 'text', description: 'Defines the name of the page.', label: 'Site name' },
5051
{ 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' },
5152
{ 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' },
5253
{ 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' },
53-
{ name: 'image', type: 'text', description: 'Specifies the image displayed when sharing the webpage on platforms like Facebook, enhancing visual appeal.', label: 'Image URL' },
54+
{ 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' },
5455
{ 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' },
5556
{ name: 'favicon', type: 'text', description: 'Specifies the favicon, enhancing website recognition in browsers and bookmarks.', label: 'Favicon' },
5657
{ 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 {
8586
this.metatagsList.forEach(field => {
8687
if (field.type === 'select' && field.options) {
8788
this.form.addControl(field.name, this.fb.control(field.options[0].value));
89+
} else if (field.name === 'viewport') {
90+
this.form.addControl(field.name, this.fb.control('width=device-width, initial-scale=1'));
8891
} else {
8992
this.form.addControl(field.name, this.fb.control(''));
9093
}
@@ -102,21 +105,22 @@ export class AppComponent {
102105

103106
setFetchValue(data: any) {
104107
this.form.patchValue({
105-
charset: data.charset,
106-
viewport: data.viewport,
107-
title: data.title,
108-
description: data.description,
109-
canonical: data.canonicalURL,
110-
image: data.imageURL,
111-
imageAlt: data.imageAltText,
112-
favicon: data.favicon,
113-
color: data.themeColor,
114-
author: data.pageAuthor,
115-
robots: data.robots,
116-
googlebot: data.googlebot,
117-
sitemap: data.sitemap,
118-
locale: data.locale,
119-
site: data.pageSite,
108+
charset: data.charset ?? '',
109+
viewport: data.viewport ?? '',
110+
name: data.name ?? '',
111+
title: data.title ?? '',
112+
description: data.description ?? '',
113+
canonical: data.canonicalURL ?? '',
114+
image: data.imageURL ?? '',
115+
imageAlt: data.imageAltText ?? '',
116+
favicon: data.favicon ?? '',
117+
color: data.themeColor ?? '',
118+
author: data.pageAuthor ?? '',
119+
robots: data.robots ?? '',
120+
googlebot: data.googlebot ?? '',
121+
sitemap: data.sitemap ?? '',
122+
locale: data.locale ?? '',
123+
site: data.pageSite ?? '',
120124
});
121125
}
122126

src/app/components/menu/menu.component.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import { MetadataService } from 'src/app/metadata.service';
99
})
1010
export class MenuComponent {
1111
@Output() onFetchValue = new EventEmitter<string>();
12-
url: string = 'https://gus.vision/';
12+
url: string = 'https://seotopper.netlify.app/';
13+
// url: string = 'https://gus.vision/';
1314
loading = signal(false);
1415

1516
constructor(private metadataService: MetadataService) { }

src/app/components/preview/preview.component.html

+112-10
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
>
44
<div class="w-full max-w-xl">
55
<div class="text-xs text-white uppercase mb-2">Google</div>
6-
<div class="w-full p-4 border border-zinc-800 rounded overflow-hidden bg-zinc-900">
6+
<div
7+
class="w-full p-4 border border-zinc-800 rounded overflow-hidden bg-zinc-900"
8+
>
79
<div class="text-base text-[#99c3ff]">
810
{{ content?.title || "Page title" }}
911
</div>
@@ -18,12 +20,16 @@
1820

1921
<div class="w-full max-w-lg">
2022
<div class="text-xs text-white uppercase mb-2">Twitter</div>
21-
<div class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900">
22-
<div class="bg-zinc-800 w-full h-64 min-h-64 overflow-hidden border-b border-zinc-800">
23+
<div
24+
class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900"
25+
>
26+
<div
27+
class="bg-zinc-800 w-full overflow-hidden border-b border-zinc-800 relative pt-[52.33%]"
28+
>
2329
<img
2430
*ngIf="content?.image"
2531
[src]="content?.image"
26-
class="border-0 outline-none w-full min-h-64 h-64 object-cover object-center"
32+
class="border-0 outline-none w-full h-full absolute top-0 object-cover object-center"
2733
width="100%"
2834
[alt]="content?.imageAlt"
2935
/>
@@ -44,12 +50,16 @@
4450

4551
<div class="w-full max-w-lg">
4652
<div class="text-xs text-white uppercase mb-2">Facebook</div>
47-
<div class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900">
48-
<div class="bg-zinc-800 w-full h-52 min-h-52 overflow-hidden border-b border-zinc-800">
53+
<div
54+
class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900"
55+
>
56+
<div
57+
class="bg-zinc-800 w-full overflow-hidden border-b border-zinc-800 relative pt-[52.5%]"
58+
>
4959
<img
5060
*ngIf="content?.image"
5161
[src]="content?.image"
52-
class="border-0 outline-none w-full min-h-52 h-52 object-cover object-center"
62+
class="border-0 outline-none w-full h-full absolute top-0 object-cover object-center"
5363
width="100%"
5464
[alt]="content?.imageAlt"
5565
/>
@@ -70,12 +80,16 @@
7080

7181
<div class="w-full max-w-xl">
7282
<div class="text-xs text-white uppercase mb-2">Linkedin</div>
73-
<div class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900">
74-
<div class="bg-zinc-800 w-full h-64 min-h-64 overflow-hidden border-b border-zinc-800">
83+
<div
84+
class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900"
85+
>
86+
<div
87+
class="bg-zinc-800 w-full overflow-hidden border-b border-zinc-800 relative pt-[52.25%]"
88+
>
7589
<img
7690
*ngIf="content?.image"
7791
[src]="content?.image"
78-
class="border-0 outline-none w-full min-h-64 h-64 object-cover object-center"
92+
class="border-0 outline-none w-full h-full absolute top-0 object-cover object-center"
7993
width="100%"
8094
[alt]="content?.imageAlt"
8195
/>
@@ -91,5 +105,93 @@
91105
</div>
92106
</div>
93107

108+
<div class="w-full max-w-lg">
109+
<div class="text-xs text-white uppercase mb-2">Discord</div>
110+
<div
111+
class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900"
112+
>
113+
<div class="w-full flex flex-col gap-2 p-4 border-l-4 border-zinc-700">
114+
<div class="text-sm text-[#99c3ff] font-medium">
115+
{{ content?.title || "Page title" }}
116+
</div>
117+
<div class="text-xs text-zinc-400">
118+
{{ content?.description || "Page description" }}
119+
</div>
120+
<div class="bg-zinc-800 w-full overflow-hidden relative rounded mt-2">
121+
<img
122+
*ngIf="content?.image"
123+
[src]="content?.image"
124+
class="border-0 outline-none w-full h-full"
125+
width="100%"
126+
[alt]="content?.imageAlt"
127+
/>
128+
</div>
129+
</div>
130+
</div>
131+
</div>
132+
133+
<div class="w-full max-w-lg">
134+
<div class="text-xs text-white uppercase mb-2">Slack</div>
135+
<div
136+
class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900"
137+
>
138+
<div class="w-full flex flex-col gap-1 p-4 border-l-4 border-zinc-700">
139+
<div class="flex gap-2 items-center">
140+
<div
141+
class="w-5 min-w-5 h-5 rounded-full bg-zinc-800 border border-zinc-800 overflow-hidden"
142+
>
143+
<img
144+
*ngIf="content.favicon"
145+
[src]="content.favicon"
146+
width="100%"
147+
alt="Favicon"
148+
class="w-5 min-w-5 h-5"
149+
/>
150+
</div>
151+
<div class="text-xs text-zinc-400">
152+
{{ content?.canonical || "https://pageurl.com" }}
153+
</div>
154+
</div>
155+
<div class="text-sm text-[#99c3ff] font-medium">
156+
{{ content?.title || "Page title" }}
157+
</div>
158+
<div class="text-xs text-zinc-400">
159+
{{ content?.description || "Page description" }}
160+
</div>
161+
<div class="bg-zinc-800 w-full overflow-hidden relative rounded mt-2">
162+
<img
163+
*ngIf="content?.image"
164+
[src]="content?.image"
165+
class="border-0 outline-none w-full h-full"
166+
width="100%"
167+
[alt]="content?.imageAlt"
168+
/>
169+
</div>
170+
</div>
171+
</div>
172+
</div>
173+
174+
<div class="w-full max-w-xl">
175+
<div class="text-xs text-white uppercase mb-2">Pinterest</div>
176+
<div class="w-full max-w-60">
177+
<div
178+
class="bg-zinc-800 w-full overflow-hidden border rounded border-zinc-800 relative pt-[52.25%]"
179+
>
180+
<img
181+
*ngIf="content?.image"
182+
[src]="content?.image"
183+
class="border-0 outline-none w-full h-full absolute top-0 object-cover object-center"
184+
width="100%"
185+
[alt]="content?.imageAlt"
186+
/>
187+
</div>
188+
<div class="w-full flex flex-col gap-1 p-2">
189+
<div class="text-xs text-white font-medium">
190+
{{ content?.title || "Page title" }}
191+
</div>
192+
</div>
193+
</div>
194+
</div>
195+
94196
<div class="hidden md:flex min-h-4 md:min-h-8"></div>
95197
</div>

src/app/metadata.service.ts

-19
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,6 @@ import { Injectable } from '@angular/core';
22
import { HttpClient } from '@angular/common/http';
33
import { Observable } from 'rxjs';
44

5-
// interface Metadata {
6-
// charset?: string,
7-
// viewport?: string,
8-
// title?: string,
9-
// description?: string,
10-
// canonical?: string,
11-
// canonicalURL?: string,
12-
// image?: string,
13-
// imageAlt?: string,
14-
// favicon?: string,
15-
// color?: string,
16-
// author?: string,
17-
// robots?: string,
18-
// googlebot?: string,
19-
// sitemap?: string,
20-
// locale?: string,
21-
// site?: string,
22-
// }
23-
245
@Injectable({
256
providedIn: 'root'
267
})

src/app/utils/code.js

+6
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export function returnCode(data) {
33
data = {
44
charset: '',
55
viewport: '',
6+
name: '',
67
title: '',
78
description: '',
89
canonical: '',
@@ -31,6 +32,11 @@ export function returnCode(data) {
3132
<meta name="author" content="${data.author}">
3233
<meta name="theme-color" content="${data.color}">
3334
35+
<!-- Google Search Engine -->
36+
<meta itemprop="name" content="${data.name}">
37+
<meta itemprop="description" content="${data.description}">
38+
<meta itemprop="image" content="${data.image}">
39+
3440
<!-- Facebook Meta Tags -->
3541
<meta property="og:url" content="${data.canonical}">
3642
<meta property="og:type" content="website">

src/index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -24,23 +24,23 @@
2424
<link rel="icon" type="image/x-icon" href="favicon.ico" />
2525
<meta name="robots" content="index, follow">
2626
<meta name="googlebot" content="index, follow">
27-
<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." />
27+
<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." />
2828
<meta name="author" content="https://github.com/gustavoquinalha/" />
2929
<meta name="theme-color" content="#09090b" />
3030

3131
<!-- Facebook Meta Tags -->
3232
<meta property="og:url" content="https://seotopper.netlify.app/" />
3333
<meta property="og:type" content="website" />
3434
<meta property="og:title" content="SeoTopper - SEO Generator" />
35-
<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." />
35+
<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." />
3636
<meta property="og:image" content="https://seotopper.netlify.app/assets/intro.webp" />
3737
<meta property="og:locale" content="pt-Br" />
3838

3939
<!-- Twitter Meta Tags -->
4040
<meta name="twitter:card" content="summary" />
4141
<meta name="twitter:title" content="SeoTopper - SEO Generator" />
4242
<meta name="twitter:site" content="@gustavoquinalha" />
43-
<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." />
43+
<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." />
4444
<meta name="twitter:image" content="https://seotopper.netlify.app/assets/intro.webp" />
4545
<meta name="twitter:image:alt" content="SeoTopper Logo" />
4646

0 commit comments

Comments
 (0)