lukechilds
/
react.dev
mirror of https://github.com/lukechilds/react.dev.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fix <meta> for Twitter

main
Dan Abramov 2 years ago
parent
e17c47a748
commit
cbe2a266e2
1 changed files with 106 additions and 107 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 213
      src/components/Seo.tsx

213
src/components/Seo.tsx
View File

@ -23,124 +23,123 @@ export const Seo = withRouter(
router, router,
children, children,
isHomePage, isHomePage,
}: SeoProps & {router: Router}) => ( }: SeoProps & {router: Router}) => {
<Head> const pageTitle = isHomePage ? 'React' : title + ' – React';
{/* DEFAULT */} // Twitter's meta parser is not very good.
const twitterTitle = pageTitle.replace(/[<>]/g, '');
return (
<Head>
{/* DEFAULT */}
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
{title != null && ( {title != null && <title key="title">{pageTitle}</title>}
<title key="title">{title + (isHomePage ? '' : ' – React')}</title> {description != null && (
)} <meta name="description" key="description" content={description} />
{description != null && ( )}
<meta name="description" key="description" content={description} /> {/* <link rel="icon" type="image/x-icon" href={favicon} />
)}
{/* <link rel="icon" type="image/x-icon" href={favicon} />
<link rel="apple-touch-icon" href={favicon} /> @todo favicon */} <link rel="apple-touch-icon" href={favicon} /> @todo favicon */}
<meta property="fb:app_id" content="623268441017527" /> <meta property="fb:app_id" content="623268441017527" />
{/* OPEN GRAPH */} {/* OPEN GRAPH */}
<meta property="og:type" key="og:type" content="website" /> <meta property="og:type" key="og:type" content="website" />
<meta
property="og:url"
key="og:url"
content={`https://react.dev${router.asPath.split(/[\?\#]/)[0]}`}
/>
{title != null && (
<meta <meta
property="og:title" property="og:url"
content={isHomePage ? 'React' : title} key="og:url"
key="og:title" content={`https://react.dev${router.asPath.split(/[\?\#]/)[0]}`}
/> />
)} {title != null && (
{description != null && ( <meta property="og:title" content={pageTitle} key="og:title" />
)}
{description != null && (
<meta
property="og:description"
key="og:description"
content={description}
/>
)}
<meta <meta
property="og:description" property="og:image"
key="og:description" key="og:image"
content={description} content={`https://react.dev${image}`}
/> />
)}
<meta {/* TWITTER */}
property="og:image" <meta
key="og:image" name="twitter:card"
content={`https://react.dev${image}`} key="twitter:card"
/> content="summary_large_image"
/>
<meta name="twitter:site" key="twitter:site" content="@reactjs" />
<meta name="twitter:creator" key="twitter:creator" content="@reactjs" />
{title != null && (
<meta
name="twitter:title"
key="twitter:title"
content={twitterTitle}
/>
)}
{description != null && (
<meta
name="twitter:description"
key="twitter:description"
content={description}
/>
)}
{/* TWITTER */}
<meta
name="twitter:card"
key="twitter:card"
content="summary_large_image"
/>
<meta name="twitter:site" key="twitter:site" content="@reactjs" />
<meta name="twitter:creator" key="twitter:creator" content="@reactjs" />
{title != null && (
<meta <meta
name="twitter:title" name="twitter:image"
key="twitter:title" key="twitter:image"
content={isHomePage ? 'React' : title} content={`https://react.dev${image}`}
/> />
)}
{description != null && (
<meta <meta
name="twitter:description" name="google-site-verification"
key="twitter:description" content="sIlAGs48RulR4DdP95YSWNKZIEtCqQmRjzn-Zq-CcD0"
content={description}
/> />
)} <link
rel="preload"
<meta href="/fonts/Source-Code-Pro-Regular.woff2"
name="twitter:image" as="font"
key="twitter:image" type="font/woff2"
content={`https://react.dev${image}`} crossOrigin="anonymous"
/> />
<meta <link
name="google-site-verification" rel="preload"
content="sIlAGs48RulR4DdP95YSWNKZIEtCqQmRjzn-Zq-CcD0" href="https://react.dev/fonts/Optimistic_Display_W_Md.woff2"
/> as="font"
<link type="font/woff2"
rel="preload" crossOrigin="anonymous"
href="/fonts/Source-Code-Pro-Regular.woff2" />
as="font" <link
type="font/woff2" rel="preload"
crossOrigin="anonymous" href="https://react.dev/fonts/Optimistic_Display_W_SBd.woff2"
/> as="font"
<link type="font/woff2"
rel="preload" crossOrigin="anonymous"
href="https://react.dev/fonts/Optimistic_Display_W_Md.woff2" />
as="font" <link
type="font/woff2" rel="preload"
crossOrigin="anonymous" href="https://react.dev/fonts/Optimistic_Display_W_Bd.woff2"
/> as="font"
<link type="font/woff2"
rel="preload" crossOrigin="anonymous"
href="https://react.dev/fonts/Optimistic_Display_W_SBd.woff2" />
as="font" <link
type="font/woff2" rel="preload"
crossOrigin="anonymous" href="https://react.dev/fonts/Optimistic_Text_W_Md.woff2"
/> as="font"
<link type="font/woff2"
rel="preload" crossOrigin="anonymous"
href="https://react.dev/fonts/Optimistic_Display_W_Bd.woff2" />
as="font" <link
type="font/woff2" rel="preload"
crossOrigin="anonymous" href="https://react.dev/fonts/Optimistic_Text_W_Bd.woff2"
/> as="font"
<link type="font/woff2"
rel="preload" crossOrigin="anonymous"
href="https://react.dev/fonts/Optimistic_Text_W_Md.woff2" />
as="font" {children}
type="font/woff2" </Head>
crossOrigin="anonymous" );
/> }
<link
rel="preload"
href="https://react.dev/fonts/Optimistic_Text_W_Bd.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
{children}
</Head>
)
); );

Write Preview
Loading…
Cancel
Save