Created
September 24, 2021 16:14
-
-
Save matjack1/37a900022ea152cfa1572b0ac5968eaf to your computer and use it in GitHub Desktop.
SEO example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Head from "next/head"; | |
| import React from "react"; | |
| import { Image, StructuredText, renderMetaTags, renderMetaTagsToString } from "react-datocms"; | |
| import { query } from "../lib/query"; | |
| import { request } from "../lib/datocms"; | |
| export async function getStaticProps() { | |
| const data = await request({ | |
| query, | |
| variables: { first: 10 }, | |
| }); | |
| return { | |
| props: { data }, | |
| }; | |
| } | |
| const App = ({ data }) => { | |
| const extraSeo = data.page.extraSeo.map(e => { | |
| if(e.content == '') { | |
| e.content = null; | |
| } | |
| return e; | |
| }); | |
| const metaTags = data.page.seo | |
| .concat(data.site.favicon) | |
| .concat(extraSeo); | |
| return ( | |
| <div> | |
| <Head>{renderMetaTags(metaTags)}</Head> | |
| <pre className="seo-inspect"> | |
| Look at all these juicy meta tags! ↴ | |
| <br /> | |
| <br /> | |
| {renderMetaTagsToString(metaTags)} | |
| </pre> | |
| <div className="app"> | |
| <div className="app-title">DatoCMS Blog</div> | |
| <div className="app-subtitle"> | |
| News, tips, highlights, and other updates from the team at DatoCMS. | |
| </div> | |
| {data.blogPosts.map((blogPost) => ( | |
| <article key={blogPost.id} className="blogPost"> | |
| <Image | |
| className="blogPost-image" | |
| fadeInDuration={1000} | |
| data={blogPost.coverImage.responsiveImage} | |
| /> | |
| <h6 className="blogPost-title"> | |
| <a | |
| href={`https://www.datocms.com/blog/${blogPost.slug}`} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| > | |
| {blogPost.title} | |
| </a> | |
| </h6> | |
| <div className="blogPost-excerpt"> | |
| <StructuredText data={blogPost.excerpt} /> | |
| </div> | |
| <footer className="blogPost-author"> | |
| <Image | |
| className="blogPost-author-image" | |
| data={blogPost.author.avatar.responsiveImage} | |
| /> | |
| Written by {blogPost.author.name} | |
| </footer> | |
| </article> | |
| ))} | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| export default App; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const RESPONSIVE_IMAGE_FRAGMENT = ` | |
| aspectRatio | |
| base64 | |
| height | |
| sizes | |
| src | |
| srcSet | |
| width | |
| alt | |
| title | |
| `; | |
| const META_TAGS_FRAGMENT = ` | |
| attributes | |
| content | |
| tag | |
| `; | |
| export const query = ` | |
| query AppQuery($first: IntType) { | |
| page: blog { | |
| seo: _seoMetaTags { | |
| ${META_TAGS_FRAGMENT} | |
| } | |
| extraSeo { | |
| tag | |
| attributes: seoAttributes | |
| content | |
| } | |
| } | |
| site: _site { | |
| favicon: faviconMetaTags { | |
| ${META_TAGS_FRAGMENT} | |
| } | |
| } | |
| blogPosts: allBlogPosts(first: $first, orderBy: _firstPublishedAt_DESC) { | |
| id | |
| title | |
| slug | |
| excerpt { value } | |
| coverImage { | |
| responsiveImage(imgixParams: { fit: crop, ar: "16:9", w: 750, auto: format }) { | |
| ${RESPONSIVE_IMAGE_FRAGMENT} | |
| } | |
| } | |
| author { | |
| name | |
| avatar { | |
| responsiveImage(imgixParams: { fit: crop, ar: "1:1", w: 40, auto: format }) { | |
| ${RESPONSIVE_IMAGE_FRAGMENT} | |
| } | |
| } | |
| } | |
| } | |
| } | |
| `; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment