From 28b88d07461b0e7dc51a0207bf75403bd3c4dfef Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Fri, 22 Dec 2023 15:15:46 +0100 Subject: [PATCH] Update Metadata docs --- docs/docs/seo-head.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/docs/seo-head.md b/docs/docs/seo-head.md index 58baabebb5b3..63d2fb01a6af 100644 --- a/docs/docs/seo-head.md +++ b/docs/docs/seo-head.md @@ -62,11 +62,11 @@ const AboutPage = () => { + ``` -You can include any valid `` tag in here that you like. However, Redwood also provides we also have a utility component [<Metadata>](#setting-meta-tags-and-opengraph-directives-with-metadata). +You can include any valid `` tag in here that you like. However, Redwood also provides a utility component [<Metadata>](#setting-meta-tags-and-opengraph-directives-with-metadata). :::caution `` Deprecation -Prior to Redwood 7.0 this component was called `` and had several special hard-coded props like `ogContentUrl`, which didn't properly map to the OpenGraph spec. We'll still render `` for the foreseeable future, but it is deprecated and should migrate to `` if you have an existing app. +Prior to Redwood 6.6.0 this component was called `` and had several special hard-coded props like `ogContentUrl`, which didn't properly map to the OpenGraph spec. We'll still render `` for the foreseeable future, but it's deprecated and you should migrate to `` if you have an existing app. ::: @@ -86,12 +86,12 @@ For these headers to appear to bots and scrapers e.g. for twitter to show your t Often we want to set more than just the title and description of the page—most commonly [OpenGraph](https://ogp.me/) headers. -Redwood provides a convenience component `` to help you create most of these `` tags for you swith a more concise syntax. But, you can also pass children and define any custom content that you want. +Redwood provides a convenience component `` to help you create most of these `` tags for you with a more concise syntax. But, you can also pass children and define any custom content that you want. Here's an example setting some common meta, including a page title, description, `og:image` and an `http-equiv`: ```jsx -import { MetaTags } from '@redwoodjs/web' +import { Metadata } from '@redwoodjs/web' const AboutPage = () => { return ( @@ -129,7 +129,7 @@ This code would be transformed into this HTML and injected into the `` tag ``` -Setting an `og:image` is how sites like Facebook and Slack can show a preview of a URL when pasted into a post (also known an "unfurling"): +Setting an `og:image` is how sites like Facebook and Slack can show a preview of a URL when pasted into a post (also known as "unfurling"): ![Typical URL unfurl](/img/facebook_unfurl.png)