Skip to content

Commit e28ef88

Browse files
arxdev40arxdev40
committed
fix og image URL and add og:site_name
1 parent 74fecf3 commit e28ef88

3 files changed

Lines changed: 108 additions & 6 deletions

File tree

‎index.html‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,26 @@
1515
content="ArX Finote — Aplikasi pencatatan keuangan modern, ultra-cepat, mobile-first, dan privasi penuh berbasis IndexedDB."
1616
/>
1717
<meta name="author" content="ArX Developer" />
18+
<link rel="canonical" href="https://arxdev40.github.io/arxfinote/" />
1819
<!-- Open Graph / Facebook / WhatsApp -->
20+
<meta property="og:site_name" content="ArX Finote" />
1921
<meta
2022
property="og:title"
2123
content="ArX Finote — Catatan Keuangan Cerdas"
2224
/>
2325
<meta
2426
property="og:description"
25-
content="Kelola keuangan, multi-wallet, hutang & piutang, serta anggaran dengan mudah dan visual."
27+
content="Kelola keuangan, multi-wallet, pinjaman, serta target impian dengan mudah dan visual."
2628
/>
2729
<meta property="og:type" content="website" />
28-
<meta property="og:image" content="./og-image.png" />
30+
<meta
31+
property="og:url"
32+
content="https://arxdev40.github.io/arxfinote/"
33+
/>
34+
<meta
35+
property="og:image"
36+
content="https://arxdev40.github.io/arxfinote/og-image.png"
37+
/>
2938
<meta property="og:image:type" content="image/png" />
3039
<meta property="og:image:width" content="1200" />
3140
<meta property="og:image:height" content="630" />
@@ -42,9 +51,12 @@
4251
/>
4352
<meta
4453
name="twitter:description"
45-
content="Kelola keuangan, multi-wallet, hutang & piutang, serta anggaran dengan mudah dan visual."
54+
content="Kelola keuangan, multi-wallet, pinjaman, serta target impian dengan mudah dan visual."
55+
/>
56+
<meta
57+
name="twitter:image"
58+
content="https://arxdev40.github.io/arxfinote/og-image.png"
4659
/>
47-
<meta name="twitter:image" content="./og-image.png" />
4860
<meta
4961
name="twitter:image:alt"
5062
content="ArX Finote — Catatan Keuangan Cerdas"

‎src/components/Head.jsx‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useEffect } from "preact/hooks";
22

3-
export function Head({ title, description, image }) {
3+
export function Head({ title, description, image, siteName, url }) {
44
useEffect(() => {
55
if (title) {
66
document.title = title;
@@ -14,6 +14,26 @@ export function Head({ title, description, image }) {
1414
}
1515
metaDesc.setAttribute("content", description);
1616
}
17+
if (siteName) {
18+
let metaSiteName = document.querySelector(
19+
'meta[property="og:site_name"]',
20+
);
21+
if (!metaSiteName) {
22+
metaSiteName = document.createElement("meta");
23+
metaSiteName.setAttribute("property", "og:site_name");
24+
document.head.appendChild(metaSiteName);
25+
}
26+
metaSiteName.setAttribute("content", siteName);
27+
}
28+
if (url) {
29+
let metaOgUrl = document.querySelector('meta[property="og:url"]');
30+
if (!metaOgUrl) {
31+
metaOgUrl = document.createElement("meta");
32+
metaOgUrl.setAttribute("property", "og:url");
33+
document.head.appendChild(metaOgUrl);
34+
}
35+
metaOgUrl.setAttribute("content", url);
36+
}
1737
if (image) {
1838
let metaOgImg = document.querySelector('meta[property="og:image"]');
1939
if (!metaOgImg) {
@@ -22,8 +42,16 @@ export function Head({ title, description, image }) {
2242
document.head.appendChild(metaOgImg);
2343
}
2444
metaOgImg.setAttribute("content", image);
45+
46+
let metaTwImg = document.querySelector('meta[name="twitter:image"]');
47+
if (!metaTwImg) {
48+
metaTwImg = document.createElement("meta");
49+
metaTwImg.setAttribute("name", "twitter:image");
50+
document.head.appendChild(metaTwImg);
51+
}
52+
metaTwImg.setAttribute("content", image);
2553
}
26-
}, [title, description, image]);
54+
}, [title, description, image, siteName, url]);
2755

2856
return null;
2957
}

‎src/components/Head.test.jsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { describe, it, expect, beforeEach } from "vitest";
2+
import { render } from "@testing-library/preact";
3+
import { Head } from "./Head";
4+
5+
describe("Head Component", () => {
6+
beforeEach(() => {
7+
document.title = "";
8+
// Clean up existing test meta tags
9+
document.head.innerHTML = "";
10+
});
11+
12+
it("updates document.title and meta description", () => {
13+
render(
14+
<Head
15+
title="Test Title"
16+
description="Test Description"
17+
/>,
18+
);
19+
20+
expect(document.title).toBe("Test Title");
21+
const metaDesc = document.querySelector('meta[name="description"]');
22+
expect(metaDesc).toBeInTheDocument();
23+
expect(metaDesc.getAttribute("content")).toBe("Test Description");
24+
});
25+
26+
it("sets og:site_name and og:url when provided", () => {
27+
render(
28+
<Head
29+
siteName="ArX Finote"
30+
url="https://arxdev40.github.io/arxfinote/"
31+
/>,
32+
);
33+
34+
const metaSite = document.querySelector('meta[property="og:site_name"]');
35+
expect(metaSite).toBeInTheDocument();
36+
expect(metaSite.getAttribute("content")).toBe("ArX Finote");
37+
38+
const metaUrl = document.querySelector('meta[property="og:url"]');
39+
expect(metaUrl).toBeInTheDocument();
40+
expect(metaUrl.getAttribute("content")).toBe("https://arxdev40.github.io/arxfinote/");
41+
});
42+
43+
it("sets og:image and twitter:image when provided", () => {
44+
render(
45+
<Head
46+
image="https://arxdev40.github.io/arxfinote/og-image.png"
47+
/>,
48+
);
49+
50+
const ogImg = document.querySelector('meta[property="og:image"]');
51+
expect(ogImg).toBeInTheDocument();
52+
expect(ogImg.getAttribute("content")).toBe(
53+
"https://arxdev40.github.io/arxfinote/og-image.png",
54+
);
55+
56+
const twImg = document.querySelector('meta[name="twitter:image"]');
57+
expect(twImg).toBeInTheDocument();
58+
expect(twImg.getAttribute("content")).toBe(
59+
"https://arxdev40.github.io/arxfinote/og-image.png",
60+
);
61+
});
62+
});

0 commit comments

Comments
 (0)