fix: opengraph gen

.idea/workspace.xml

@@ -4,14 +4,18 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="2a96f817-9dc2-4f3c-893a-c4974c750774" name="Changes" comment="" />
+    <list default="true" id="2a96f817-9dc2-4f3c-893a-c4974c750774" name="Changes" comment="">
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/app/api/og/route.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/api/og/route.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/app/page.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/page.tsx" afterDir="false" />
+    </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
   <component name="DarkyenusTimeTracker">
-    <option name="totalTimeSeconds" value="220057" />
+    <option name="totalTimeSeconds" value="222389" />
     <option name="gitIntegration" value="true" />
     <option name="naggedAbout" value="1" />
   </component>
@@ -109,6 +113,8 @@
       <workItem from="1764657017067" duration="21490000" />
       <workItem from="1764741053553" duration="18011000" />
       <workItem from="1764825390464" duration="26961000" />
+      <workItem from="1765196288370" duration="332000" />
+      <workItem from="1765196704782" duration="3726000" />
     </task>
     <servers />
   </component>

src/app/api/og/route.ts

@@ -23,11 +23,14 @@ export async function GET(req: NextRequest) {
         font-family: sans-serif;
         position: relative;
       ">
-        <img src="${imageUrl}" style="object-fit: cover; width:100%; height:100%; opacity:0.6; position:absolute; left:0; top:0;" />
+        <img src="${imageUrl}" style="object-fit: cover; width:100%; height:100%; opacity:0.5; position:absolute; left:0; top:0;" />
-        <img src="${logoUrl}" style="width: 288px; height: 89px; position:absolute; left:20px; top:20px;" />
+        <img src="${logoUrl}" style="width: 288px; height: 89px; position:absolute; left:10px; top:20px;" />
-        <div style="position: absolute; top: 110px; left: 280px; width:100%; height:100%;">
+        <p style="position: absolute; top: 24px; right:20px; color: white; font-family: Arial, Helvetica, sans-serif; font-size: 24px;  ">
-        <h2 style="color: white; font-family: sans-serif; font-size: 42px">${title}</h2>
+        ☏ +7 (900) 241-34-34
-        <p style="color: white; font-family: sans-serif; font-size: 24px">${desc}</p>
+        </p>
+        <div style="position: absolute; top: 140px; left: 20px; width:100%; height:100%;">
+        <h2 style="color: white; font-family: Arial, Helvetica, sans-serif; font-size: 40px; line-height: 1;">${title}</h2>
+        <p style="color: white; font-family: Arial, Helvetica, sans-serif; font-size: 24px;  line-height: 1;">${desc}</p>
       </div>
       </body>
     </html>

src/app/page.tsx

@@ -1,40 +1,48 @@
 import { Home } from '@/views';
 import type { Metadata } from 'next';
 
-export const metadata: Metadata = {
+const metainfo = {
-  title: 'Независимая оценка и судебная экспертиза | Компания ДИТРАСО',
+  title: 'Независимая оценка и судебная экспертиза',
   description:
-    'Услуги независимой оценки и судебной экспертизы в Сочи и Краснодаре. Тел. +7 (900) 241-34-34',
+    'Услуги независимой оценки и судебной экспертизы в Сочи и Краснодаре.',
+  companyName: 'Компания ДИТРАСО',
+  phone: '+7 (900) 241-34-34',
+  url: 'https://ocenka-sochi.ru',
+  ogImageTitle: 'Оценка и экспертиза',
+  ogImageDescription: 'Независимая оценка и судебная экспертиза',
+};
+
+export const metadata: Metadata = {
+  title: `${metainfo.title} | ${metainfo.companyName}`,
+  description: `${metainfo.description} ${metainfo.phone}`,
   openGraph: {
-    title: 'Независимая оценка и судебная экспертиза - Компания ДИТРАСО',
+    title: metainfo.title,
-    description:
+    description: metainfo.description,
-      'Услуги независимой оценки и судебной экспертизы в Сочи и Краснодаре. Тел. +7 (900) 241-34-34',
+    url: metainfo.url,
-    url: 'https://ocenka-sochi.ru',
     images: [
       {
-        url: 'https://ocenka-sochi.ru/images/about.jpg',
+        url: `${metainfo.url}/api/og/?title=${metainfo.title}&description=${metainfo.description}`,
-        secureUrl: 'https://ocenka-sochi.ru/images/about.jpg',
+        secureUrl: `${metainfo.url}/api/og/?title=${metainfo.title}&description=${metainfo.description}`,
-        width: 1200,
+        width: 600,
-        height: 630,
+        height: 315,
-        alt: 'Независимая оценка и судебная экспертиза - Компания ДИТРАСО',
+        alt: `${metainfo.title} - ${metainfo.companyName}`,
       },
     ],
     locale: 'ru_RU',
     type: 'website',
-    siteName: 'Независимая оценка и судебная экспертиза - Компания ДИТРАСО',
+    siteName: `${metainfo.title} - ${metainfo.companyName}`,
   },
   twitter: {
     card: 'summary_large_image',
-    title: 'Независимая оценка и судебная экспертиза - Компания ДИТРАСО',
+    title: `${metainfo.title} - ${metainfo.companyName}`,
-    description:
+    description: `${metainfo.description} ${metainfo.phone}`,
-      'Услуги независимой оценки и судебной экспертизы в Сочи и Краснодаре. Тел. +7 (900) 241-34-34',
+    creator: '@ditraso',
-    creator: '@author_here',
     images: [
       {
-        url: 'https://ocenka-sochi.ru/images/about.jpg',
+        url: `${metainfo.url}/api/og/?title=${metainfo.title}&description=${metainfo.description}`,
-        width: 1200,
+        width: 600,
-        height: 630,
+        height: 315,
-        alt: 'Независимая оценка и судебная экспертиза - Компания ДИТРАСО',
+        alt: `${metainfo.title} - ${metainfo.companyName}`,
       },
     ],
   },