@xexiu/astro-seo
v0.2.0
Published
SEO builder with jsonLDGenerator for Astro
Downloads
29
Maintainers
xexiuReadme
🚀 astro-seo
HELLO there 👋
- Twitter: https://twitter.com/xexiudev drop by and say hi, follow me and I follow you. Let's build a community.
SEO builder with jsonLDGenerator for Astro. Generates all the metas and jsonLD needed for SEO.
Forking and giving a star will contribute to my motivation in making components for astro (react, react-native, etc...) that are purely HTML, CSS, SEO friendly and responsive :) (almost all components :P).
This will generate all the needed SEO as well as jsonLD generator https://json-ld.org/ DEMO: https://xexiu.dev or check examples folder in the repository https://github.com/xexiu/astro-components This product is actively mantained. Any PR, issues or whatever concern, please visit the Github repository https://github.com/xexiu/astro-components.
Tutorials Roadmap
- Web2: JavaScript, HTML, CSS, Node.js, Python (MLL, AI), React, NextJS React Native and more.
- Web3: Blockchain, WEB3, dApps, smart contracts and more.
📦 Installation
- Using bun:
bun i @xexiu/astro-seo- Using npm:
npm i @xexiu/astro-seo🔁 API
export type PostDataFeaturedImage = {
src: string | any;
width?: number;
height?: number;
format?: string;
orientation?: string;
alt: string;
}
export type PostData = {
category: string;
title: string;
excerpt: string;
tags: string[];
date: Date | string;
author: string;
featured_post?: boolean;
is_private?: boolean;
featured_image: PostDataFeaturedImage;
twitter_name?: string;
}
export type Post = {
id: string;
slug: string;
body: any;
collection: string;
data: PostData
}
interface Props {
title: string;
description: string;
url: string | any;
featured_image: PostDataFeaturedImage;
frontmatter: Post;
robots: any;
}🛠 Usage in astro
---
// more personal/code imports
import SEO from '@xexiu/astro-seo';
const defaultSchema = {
"description": "Explora mi blog para obtener información y consejos sobre desarrollo Full Stack, JavaScript, HTML, CSS, Node.js, Python, React, React Native, Blockchain, WEB3, dApps, smart contracts y más.",
"featured_image": {
"alt": "Bienvenid@ a mi blog de desarrollo Full Stack - Sergiu Mironescu",
"src": "/image-default.png"
},
"title": "Bienvenid@ a mi blog de desarrollo Full Stack - Sergiu Mironescu",
"twitter_name": "@whats_up"
};
const {
title = defaultSchema.title,
description = defaultSchema.description,
featured_image,
frontmatter,
robots
} = Astro.props;
---
<!doctype html>
<html lang="es" data-current-page={Astro.url.pathname}>
<head>
// metas
<SEO
{title}
{description}
url={Astro.url}
{featured_image}
{frontmatter}
{robots}
{defaultSchema}
/>
// rest
</head>
<body>
// code
</body>
</html>