Implement og image override and fix canonical urls

src/lib/guide.ts

@@ -14,6 +14,7 @@ export interface GuideFrontmatter {
   };
   isNew: boolean;
   type: 'visual' | 'textual';
+  ogImageUrl?: string;
   date: string;
   sitemap: {
     priority: number;

src/pages/backend/developer-skills.astro

@@ -19,7 +19,7 @@ const ogImageUrl = getOpenGraphImageUrl({
 <BaseLayout
   title={guideData.seo.title}
   description={guideData.seo.description}
-  permalink={`/backend/${guideId}`}
+  permalink={`/backend/developer-skills`}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >

src/pages/backend/developer-tools.astro

@@ -19,7 +19,7 @@ const ogImageUrl = getOpenGraphImageUrl({
 <BaseLayout
   title={guideData.seo.title}
   description={guideData.seo.description}
-  permalink={`/backend/${guideId}`}
+  permalink={`/backend/developer-tools`}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >

src/pages/backend/languages.astro

@@ -22,7 +22,7 @@ const ogImageUrl = getOpenGraphImageUrl({
 <BaseLayout
   title={guideData.seo.title}
   description={guideData.seo.description}
-  permalink={`/backend/${guideId}`}
+  permalink={`/backend/languages`}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}
 >

src/pages/guides/[guideId].astro

@@ -24,10 +24,12 @@ const { guideId } = Astro.params;
 const { guide } = Astro.props;
 const { frontmatter: guideData, author } = guide;
 
-const ogImageUrl = getOpenGraphImageUrl({
+const ogImageUrl =
-  group: 'guides',
+  guideData.ogImageUrl ||
-  resourceId: guideId,
+  getOpenGraphImageUrl({
-});
+    group: 'guides',
+    resourceId: guideId,
+  });
 ---
 
 <BaseLayout