Skip to content

installation-and-setup.mdx

Latest commit

 

History

History
70 lines (56 loc) · 2.51 KB

installation-and-setup.mdx

File metadata and controls

70 lines (56 loc) · 2.51 KB
title Install and configure
order 1
use_cases initial setup, meta tags configuration, seo setup, head management setup, ssr meta tags
tags
setup
installation
meta
configuration
seo
version 1.0
description Install and configure @solidjs/meta for head tag management. Set up dynamic titles, meta tags, and SEO optimization in Solid apps.

:::note[Prerequisites] If using Solid v1.0, use version 0.27.x or greater. For earlier versions (eg. v0.x), you must use v0.26.x. :::

Installation

To get started, install using your preferred package manager.

@solidjs/meta

Setup

  1. Wrap your application with <MetaProvider />
  2. To include head tags within your application, render any of the following:
    1. <Title />: Adds the title of the page.
    2. <Meta />: Adds extra metadata to the page.
    3. <Style />: Adds a style element to the page.
    4. <Link />: Specifies a relationship between the page and an external resource.
    5. <Base />: Specifies the base URL for all relative URLs in the document.
    6. useHead: Inserts arbitrary head tags when a dedicated component does not exist.
  • These components can be used multiple times within the application.
  1. If using Solid on the server with JSX, no additional configuration is required.

:::note[Overriding existing tags] If your index.html includes a <head> tag, Solid-Meta will not overwrite its contents. You can mark individual tags as overwritable by adding an empty data-sm attribute to them. :::

Here is an example of how your code might look after this setup.

import { MetaProvider, Title, Link, Meta } from "@solidjs/meta";

const App = () => (
	<MetaProvider>
		<div class="Home">
			<Title>Title of page</Title>
			<Link rel="canonical" href="http://solidjs.com/" />
			<Meta name="example" content="whatever" />
		</div>
	</MetaProvider>
);

On the server, tags are collected, and then on the client, server-generated tags are replaced with those rendered on the client side. This process is important for maintaining the expected behavior, such as Single Page Applications (SPAs) when pages load that require changes to the head tags.

However, you can manage asset insertion using getAssets from solid-js/web.