sveltekit-seo-enhancer
v1.0.2
Published
Enhance SEO capabilities in your SvelteKit applications with ease. This component simplifies the management of meta tags, structured data, and other SEO-related elements dynamically.
Downloads
15
Maintainers
Readme
Sveltekit-Seo-Enhancer
Enhance SEO capabilities in your SvelteKit applications with ease. This component simplifies the management of meta tags, structured data, and other SEO-related elements dynamically.
Features
- Dynamic Meta Tags: Set and update meta tags (like title, description) based on page content dynamically.
- Structured Data (JSON-LD): Easily integrate structured data for better search engine understanding.
- Flexible Configuration: Customize meta tags, links, scripts, and structured data per page or component.
- Lifecycle Management: Automatically updates meta tags on component mount and manages cleanup on component unmount.
Sponsor Sveltekit-Seo-Enhancer
Installation
Install the package using npm:
npm install sveltekit-seo-enhancer
Usage
Basic Example Import and use the 'SeoEnhancer' component in your SvelteKit pages or components:
<script>
import SeoEnhancer from 'sveltekit-seo-enhancer';
let product = {
name: 'Awesome Product',
description: 'This is an awesome product.',
url: 'https://www.example.com/product/awesome',
imageUrl: 'https://www.example.com/product/awesome.jpg',
price: '119.99',
currency: 'USD',
brand: 'ACME'
};
let metaTags = [
{ name: "description", content: product.description },
{ property: "og:title", content: product.name },
{ property: "og:description", content: product.description },
{ property: "og:url", content: product.url },
{ property: "og:image", content: product.imageUrl }
];
</script>
<SeoEnhancer
title={product.name}
meta={metaTags}
link={[
{ rel: 'canonical', href: product.url }
]}
jsonld={{
"@context": "https://schema.org",
"@type": "Product",
"name": product.name,
"image": product.imageUrl,
"description": product.description,
"sku": "0446310786",
"brand": {
"@type": "Brand",
"name": product.brand
},
"offers": {
"@type": "Offer",
"url": product.url,
"priceCurrency": product.currency,
"price": product.price,
"itemCondition": "https://schema.org/NewCondition",
"availability": "https://schema.org/InStock"
}
}}
/>
Contributions
Contributions are welcome! Please fork the repository and submit a pull request with your enhancements.
License
This project is licensed under the MIT License.
Acknowledgements
Inspiration and guidance from Sveltekit Docs and Best SEO Practices.
Summary
- Use the
SeoEnhancer
component in your default+page.svelte
. - Configure your
package.json
with the necessary fields and scripts. - Build the project using the configured build script.
- Publish the package to npm.
- Include a comprehensive
README.md
to guide users on installation and usage.
By following these steps, you can ensure your SvelteKit component is ready for use and easily integrable by others.