Skip to content
imarch.dev
Блогқа оралу
· 3 мин оқу

Бір кешке блог

astro seo claude code devops

Жұма кеші. Сайт бар, контент бар - Planq туралы сегіз LinkedIn-пост. Бірақ блог жоқ. Іздеу жүйелері үш беті бар лендингті көреді де, оны адамдарға не үшін көрсету керегін түсінбейді. Google Search Console қосылған, Яндекс Вебмастер қосылған, бірақ индекстейтін нәрсе жоқ.

Мұны түзетуді шештім. Бір кешке.

Кеш уақытын көрсететін сағат пен ұшып жүрген блог-пост карточкалары

Стек

Сайт Astro 5, Tailwind, Cloudflare Pages негізінде. Үш тіл - орысша әдепкі бойынша, ағылшынша мен қазақша /en/ және /kk/ префикстерімен. Статикалық генерация, сервер жоқ. Бәрі content collections мен getStaticPaths() арқылы.

Блог үшін мынадай нәрселер қажет болды:

  • Схемасы бар контент коллекциясы (title, description, locale, pubDate, tags, keywords)
  • Әр тіл үшін тізім мен мақала беттері (6 файл)
  • Карточка мен пост компоненттері
  • Әр бетте SEO - JSON-LD BlogPosting, og:type=article, meta keywords
  • Хедердегі навигация
  • Сайтмап

Бір сағатта сегіз мақала

Контент қазірдің өзінде болатын. Planq туралы LinkedIn-нан жеті пост және чатбот қауіпсіздігі туралы бір пост. Оларды frontmatter-мен markdown-ға орадым, LinkedIn форматтауын тазаладым, em-dash-тарды қарапайым дефистерге ауыстырдым, тақырыптардан қос нүктелерді алып тастадым. src/content/blog/ ішінде сегіз файл.

Astro оларды автоматты түрде тартып алды. getCollection('blog', e => e.data.locale === 'ru') - дайын. Әр мақала файл атауынан өз slug-ін, өз тегтері мен кілт сөздерін алды.

OG-суреттер автоматты

LinkedIn немесе Telegram-да сілтемемен бөліскенде жай сілтеме емес, тақырыбы бар әдемі карточка шықса деп қалайсың. Ол үшін Open Graph суреттер қажет. Figma-да сегіз сурет салуға болады. Немесе құрастыру кезінде генерациялауға болады.

Vercel-дің Satori-сі JSX-тәрізді разметканы алып, SVG-ге айналдырады. @resvg/resvg-js SVG-ні PNG-ге рендерлейді. Нәтижесінде src/pages/og/[slug].png.ts эндпоинті пайда болады - билд кезінде Astro әр мақала үшін PNG генерациялайды. Қара фон, тақырып, сипаттама, төменгі жағында тегтер. 1200-ге 630 пиксель, әлеуметтік желілер талап еткендей.

Сегіз сурет екі секундта генерацияланады. Бірінші сәл ұзағырақ - шрифт жүктеледі. Қалғандары шамамен 120 мс.

Бөлісу батырмалары

Әр мақалаға үш батырма қостым - LinkedIn, Threads, Telegram. Әрқайсысы мәтіні мен сілтемесі бар дұрыс URL құрады. LinkedIn - sharing/share-offsite арқылы, Threads - intent/post арқылы, Telegram - t.me/share/url арқылы. Иконкалар Lucide-ден, Threads - арнайы SVG.

SEO

Әр мақала мынаны алады:

  • <title> мен <meta description> frontmatter-ден
  • <meta keywords> іздеу жүйелері үшін
  • og:type=article стандартты website орнына
  • og:image генерацияланған PNG-ге сілтейді
  • JSON-LD BlogPosting автормен, күнімен, кілт сөздермен
  • JSON-LD BreadcrumbList навигация үшін
  • Canonical URL мен үш тіл үшін hreflang

Сайтмапты қолмен жаңарттым - ол public/sitemap.xml ішінде статикалық. Тоғыз жаңа URL.

Чатбот та хабардар

Сайтта AI чатбот бар - келушілердің сұрақтарына жауап беретін виртуалды клон. Оның system prompt-ын жаңарттым - енді ол блогтағы барлық мақалаларды біледі және сұхбат кезінде оларды ұсына алады. «Айтпақшы, Ильястың бұл туралы мақаласы бар» - ықтиярсыз, тақырыпқа сай.

Қорытынды

Тоғыз мақала. Алты бет. Екі компонент. Сегіз OG-сурет. Үш бөлісу батырмасы. Навигация. SEO. Сайтмап. Жаңартылған чатбот.

Бір кеш. Бір терминал. Claude Code серіктес ретінде қатарда - кодты оқиды, шешімдер ұсынады, жазады, коммит жасайды. Мен ревью жасаймын және бағыттаймын.

Ертең Google үш беттің орнына тоғыз жаңа бетті индекстейді. Ал мен бұл туралы LinkedIn-ға жазамын - қысқаша, блогқа сілтемемен. Шеңбер тұйықталды.

Бөлісу:

Ұқсас мақалалар