Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ryzmdn/seo-head

Some meta tags and links to fill in the head tag.
https://github.com/ryzmdn/seo-head

seo seo-meta seo-optimization

Last synced: about 1 month ago
JSON representation

Some meta tags and links to fill in the head tag.

Awesome Lists containing this project

README 

        
# SEO Head



SEO (Search Engine Optimization) is the practice of optimizing the quality of content from various sides so that a website appears in search results when potential visitors search for certain terms in search engines.

In addition, SEO is also a powerful and cost-effective marketing strategy to help you get more traffic to your content and increase transaction numbers.



## Installation



If you want to use this repository, follow these steps:



```bash

# Clone repository

git clone https://github.com/ryzmdn/seo-head.git



# Change directory

cd seo-head

```



## Javascript Usage



You can use [NextJs](https://nextjs.org/) with TypeScript metadata in the `.tsx` format from the example below.



```tsx

import type { Metadata } from "next";



export const metadata: Metadata = {

  // metadata

};



export default function RootLayout() {}

```



You can also use React components with fragments to use SEO tags just like HTML and call them on the main page.



```jsx

export function SeoComponent() {

  return (

    <>

        {/* Same as SEO HTML. */}

    >;

  )

}



// Call the components on the main page.

export default function App() {

    return (

        

    )

}

```



Or you can create props within a component and call them as usual.



```jsx

import React from "react";



export function SeoComponent({ title, description, category, keywords }) {

  // Combine keywords into a comma-separated string.

  const keywordsString = Array.isArray(keywords)

    ? keywords.join(", ")

    : keywords;



  return (

    <>

      {title}

      

      

      

      {/* other SEO tags */}

    >

  );

}



// Call the components on the main page.

export default function App() {

  return (

    

  );

}

```



If you use TypeScript:



```tsx

// Define the type for props

interface SeoComponentProps {

  title: string;

  description: string;

  category: string;

  keywords: string | string[]; // Keywords can be either a string or an array of strings

}



export const SeoComponent: React.FC = ({

  title,

  description,

  category,

  keywords,

}) => {

  const keywordsString = Array.isArray(keywords)

    ? keywords.join(", ")

    : keywords;



  return (

    <>

      {title}

      

      

      

      {/* other tags */}

    >

  );

};



// Call the components on the main page.

export default function App() {

  return (

    

  );

}

```



You can also create it using the [React Helmet](https://www.npmjs.com/package/react-helmet) package so that it can be used on every page. Helmet takes plain HTML tags and outputs plain HTML tags. It's dead simple, and React beginner friendly.



```jsx

import { Helmet } from "react-helmet";



export default function App() {

  return (

    

      

      My Page Title

    

  );

}

```



## Vue Usage



he [Unhead Vue package](https://unhead.unjs.io/setup/vue/installation) exports a `` component that can be used to manage your head tags.



While it's recommended to use the `useHead` composable as it offers a more flexible API with full TypeScript support, the `` component may make more sense for your project.



The component will takes any child elements that you would normally put in your actual `` and renders them with Unhead.



```vue



import { Head } from "@unhead/vue/components"



  

    My awesome site

    

  



```



You can use the `useHead` composable to manage your head.



```vue



import { useHead } from "@unhead/vue"



useHead({

  title: "My awesome site",

  // other

})



```



## License



No license.