Skip to content

Commit 6fa9aa5

Browse files
nsvk13nsvk13
committed
feat: add head meta tag for Telegram Instant view
1 parent c7f88bb commit 6fa9aa5

1 file changed

Lines changed: 87 additions & 58 deletions

File tree

‎app/blog/[slug]/page.tsx‎

Lines changed: 87 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { notFound } from "next/navigation";
22
import Link from "next/link";
3+
import Head from "next/head";
34
import { getPostBySlug, markdownToHtml, getAllPosts } from "@/lib/blog";
45
import { Calendar, Clock, ArrowLeft } from "lucide-react";
56

@@ -22,71 +23,99 @@ export default async function BlogPostPage({
2223
const content = await markdownToHtml(post.content);
2324

2425
return (
25-
<main className="min-h-screen ascii-grid p-4 md:p-8">
26-
<div className="max-w-3xl mx-auto">
27-
<header className="mb-6 md:mb-8 pt-4 md:pt-12">
28-
<Link
29-
href="/blog"
30-
className="ascii-link inline-flex items-center mb-4 md:mb-6"
31-
>
32-
<ArrowLeft className="h-4 w-4 mr-1" />
33-
<span>Back to blog</span>
34-
</Link>
26+
<>
27+
{/* ======== Instant View / SEO мета-теги ======== */}
28+
<Head>
29+
<title>{post.frontmatter.title}</title>
30+
<meta
31+
name="description"
32+
content={post.frontmatter.description || ""}
33+
/>
34+
<meta name="author" content="nsvk13" />
35+
<meta property="og:title" content={post.frontmatter.title} />
36+
<meta
37+
property="og:description"
38+
content={post.frontmatter.description || ""}
39+
/>
40+
{post.frontmatter.cover && (
41+
<meta property="og:image" content={post.frontmatter.cover} />
42+
)}
43+
{post.frontmatter.date && (
44+
<meta
45+
property="article:published_time"
46+
content={new Date(post.frontmatter.date).toISOString()}
47+
/>
48+
)}
49+
</Head>
3550

36-
<h1 className="text-xl md:text-3xl font-bold mb-3 md:mb-4">
37-
{post.frontmatter.title || "Untitled Post"}
38-
</h1>
51+
<main className="min-h-screen ascii-grid p-4 md:p-8">
52+
<div className="max-w-3xl mx-auto">
53+
<header className="mb-6 md:mb-8 pt-4 md:pt-12">
54+
<Link
55+
href="/blog"
56+
className="ascii-link inline-flex items-center mb-4 md:mb-6"
57+
>
58+
<ArrowLeft className="h-4 w-4 mr-1" />
59+
<span>Back to blog</span>
60+
</Link>
61+
</header>
3962

40-
<div className="flex flex-wrap items-center gap-4 text-sm opacity-70">
41-
{post.frontmatter.date && (
42-
<div className="flex items-center gap-1">
43-
<Calendar className="h-3 w-3" />
44-
<span>
45-
{new Date(post.frontmatter.date).toLocaleDateString()}
46-
</span>
47-
</div>
48-
)}
49-
{post.frontmatter.readingTime && (
50-
<div className="flex items-center gap-1">
51-
<Clock className="h-3 w-3" />
52-
<span>{post.frontmatter.readingTime}</span>
63+
{/* ======== Основной контент статьи (важно для Telegram IV) ======== */}
64+
<article className="post ascii-frame ascii-frame-bottom p-4 md:p-6 mb-8 md:mb-12">
65+
<h1 className="text-xl md:text-3xl font-bold mb-3 md:mb-4">
66+
{post.frontmatter.title || "Untitled Post"}
67+
</h1>
68+
69+
<div className="flex flex-wrap items-center gap-4 text-sm opacity-70 mb-4">
70+
{post.frontmatter.date && (
71+
<div className="flex items-center gap-1">
72+
<Calendar className="h-3 w-3" />
73+
<time dateTime={post.frontmatter.date}>
74+
{new Date(post.frontmatter.date).toLocaleDateString()}
75+
</time>
76+
</div>
77+
)}
78+
{post.frontmatter.readingTime && (
79+
<div className="flex items-center gap-1">
80+
<Clock className="h-3 w-3" />
81+
<span>{post.frontmatter.readingTime}</span>
82+
</div>
83+
)}
84+
</div>
85+
86+
{post.frontmatter.tags?.length > 0 && (
87+
<div className="flex flex-wrap gap-2 mt-2 mb-4">
88+
{post.frontmatter.tags.map((tag: string) => (
89+
<Link
90+
key={tag}
91+
href={`/blog?tag=${encodeURIComponent(tag)}`}
92+
className="ascii-link text-sm mr-2"
93+
>
94+
#{tag}
95+
</Link>
96+
))}
5397
</div>
5498
)}
55-
</div>
5699

57-
{post.frontmatter.tags?.length > 0 && (
58-
<div className="flex flex-wrap gap-2 mt-2 mb-4">
59-
{post.frontmatter.tags.map((tag: string) => (
60-
<Link
61-
key={tag}
62-
href={`/blog?tag=${encodeURIComponent(tag)}`}
63-
className="ascii-link text-sm mr-2"
64-
>
65-
#{tag}
66-
</Link>
67-
))}
100+
<div className="ascii-divider mt-2 md:mt-3">
101+
<span className="px-2">nsvk13</span>
68102
</div>
69-
)}
70-
71-
<div className="ascii-divider mt-2 md:mt-3">
72-
<span className="px-2">nsvk13</span>
73-
</div>
74-
</header>
75103

76-
<article className="ascii-frame ascii-frame-bottom p-4 md:p-6 mb-8 md:mb-12">
77-
<div
78-
id="post-content"
79-
className="prose prose-gold max-w-none"
80-
dangerouslySetInnerHTML={{ __html: content }}
81-
/>
82-
</article>
104+
{/* ======== Сам текст поста ======== */}
105+
<div
106+
id="post-content"
107+
className="prose prose-gold max-w-none mt-6"
108+
dangerouslySetInnerHTML={{ __html: content }}
109+
/>
110+
</article>
83111

84-
<div className="text-center mb-8 md:mb-12">
85-
<Link href="/" className="ascii-link inline-flex items-center">
86-
Back to home
87-
</Link>
112+
<div className="text-center mb-8 md:mb-12">
113+
<Link href="/" className="ascii-link inline-flex items-center">
114+
Back to home
115+
</Link>
116+
</div>
88117
</div>
89-
</div>
90-
</main>
118+
</main>
119+
</>
91120
);
92-
}
121+
}

0 commit comments

Comments
 (0)