Skip to content

Commit be8b8ff

Browse files
ivke995ivke995
authored
#57 - Feat: metadata (#390)
* add images for homepage and cto metadata * path to local image * add absolute path to image url * add preview deploy url * dinamic image in metadata * pass an object as a argument * change props, something * omg,use base dude * site_name meta tags * blog metadata * fix metadata img url to fetch from main url
1 parent c6138d5 commit be8b8ff

File tree

8 files changed

+26
-9
lines changed

8 files changed

+26
-9
lines changed

‎apps/website/public/blogs-meta-img.png‎

423 KB
Loading

‎apps/website/public/cto-metadata-img.png‎

517 KB
Loading

‎apps/website/public/homepage-metadata-img.png‎

427 KB
Loading

‎apps/website/src/layouts/base-meta-tags.astro‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import siteManifest from "../../public/site-manifest.json";
33
44
const { street, city, region, postalCode, country } = siteManifest.company;
55
const { twitter, linkedin, github, youtube, instagram } = siteManifest.social;
6-
const socialImage = `https://placehold.co/600x400`;
6+
const socialImage = `https://crocoder-company-website.vercel.app/blogs-meta-img.png`;
77
88
const schema = {
99
"@context": "https://schema.org",
@@ -50,13 +50,15 @@ const schema = {
5050
<meta property="og:url" content={`${siteManifest.url}/blog`} />
5151
<meta property="og:type" content="website" />
5252
<meta property="og:title" content={siteManifest.name} />
53+
<meta property="og:site_name" content={siteManifest.name} />
5354
<meta property="og:description" content={siteManifest.description} />
5455
<meta property="og:image" content={socialImage} />
5556

5657
<!-- Twitter -->
5758
<meta name="twitter:card" content="summary_large_image" />
5859
<meta property="twitter:domain" content="crocoder.dev" />
5960
<meta property="twitter:url" content={`${siteManifest.url}/blog`} />
61+
<meta property="twitter:site" content={siteManifest.name} />
6062
<meta name="twitter:title" content={siteManifest.name} />
6163
<meta name="twitter:description" content={siteManifest.description} />
6264
<meta name="twitter:image" content={socialImage} />

‎apps/website/src/layouts/base.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ if (theme.fonts.font_family.secondary) {
2020
.replace(/:[ital,]*[ital@]*[wght@]*[0-9,;]+/gi, "");
2121
}
2222
23-
const { className } = Astro.props;
23+
const { className, ogImage } = Astro.props;
2424
---
2525

2626
<!doctype html>
@@ -32,7 +32,7 @@ const { className } = Astro.props;
3232
content="width=device-width, initial-scale=1, maximum-scale=5"
3333
/>
3434
<link rel="sitemap" href="/sitemap.xml" />
35-
<Meta />
35+
<Meta imageUrl={ogImage}/>
3636
<AstroFont
3737
config={[
3838
{

‎apps/website/src/layouts/meta-tags.astro‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
11
---
22
import siteManifest from "../../public/site-manifest.json";
33
4+
interface Props {
5+
imageUrl: string;
6+
}
7+
8+
const { imageUrl = `https://crocoder-company-website.vercel.app/homepage-metadata-img.png` } = Astro.props;
9+
10+
411
const { street, city, region, postalCode, country } = siteManifest.company;
512
const { twitter, linkedin, github, youtube, instagram } = siteManifest.social;
6-
const socialImage = `https://placehold.co/600x400`;
713
814
const schema = {
915
"@context": "https://schema.org",
1016
"@type": "Organization",
1117
name: siteManifest.name,
1218
description: siteManifest.description,
13-
logo: socialImage,
19+
logo: imageUrl,
1420
url: siteManifest.url,
1521
address: {
1622
"@type": "PostalAddress",
@@ -48,15 +54,17 @@ const schema = {
4854
/>
4955
<!-- OpenGraph -->
5056
<meta property="og:url" content={siteManifest.url} />
57+
<meta property="og:site_name" content={siteManifest.name} />
5158
<meta property="og:type" content="website" />
5259
<meta property="og:title" content={siteManifest.name} />
5360
<meta property="og:description" content={siteManifest.description} />
54-
<meta property="og:image" content={socialImage} />
61+
<meta property="og:image" content={imageUrl} />
5562

5663
<!-- Twitter -->
5764
<meta name="twitter:card" content="summary_large_image" />
5865
<meta property="twitter:domain" content="crocoder.dev" />
5966
<meta property="twitter:url" content={siteManifest.url} />
67+
<meta property="twitter:site" content={siteManifest.name} />
6068
<meta name="twitter:title" content={siteManifest.name} />
6169
<meta name="twitter:description" content={siteManifest.description} />
62-
<meta name="twitter:image" content={socialImage} />
70+
<meta name="twitter:image" content={imageUrl} />

‎apps/website/src/pages/cto.astro‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,12 @@ import Footer from "../components/footer.astro";
99
import Navigation from "../components/navigation.astro";
1010
import Base from "../layouts/base.astro";
1111
import "../styles/main.css";
12+
13+
const { ogImage = "https://crocoder-company-website.vercel.app/cto-metadata-img.png" } = Astro.props;
14+
1215
---
1316

14-
<Base className="bg-white">
17+
<Base className="bg-white" ogImage={ogImage}>
1518
<Navigation />
1619
<Hero />
1720
<Values />

‎apps/website/src/pages/index.astro‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,13 @@ import Testimonial from "../components/testimonial.astro";
99
import Values from "../components/Values.astro";
1010
import Base from "../layouts/base.astro";
1111
import "../styles/main.css";
12+
13+
const { ogImage = "https://crocoder-company-website.vercel.app/homepage-metadata-img.png" } = Astro.props;
14+
15+
1216
---
1317

14-
<Base className="bg-white">
18+
<Base className="bg-white" ogImage={ogImage}>
1519
<Navigation />
1620
<Hero />
1721
<Clients />

0 commit comments

Comments
 (0)