Skip to content

Update Meta tags to use explicit URLs #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
atapas merged 6 commits into from
Apr 24, 2022
Merged

Update Meta tags to use explicit URLs #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
81beaae
Move meta tags around
erayalkis Apr 23, 2022
6cd4081
Merge branch 'main' of github.com:erayalkis/react-play into main
erayalkis Apr 23, 2022
cb29e74
Add explicit URL to PlayMeta
erayalkis Apr 23, 2022
a06fbbc
Add comment for explicit URL
erayalkis Apr 23, 2022
c672465
Update DefMeta og-image to use explicit URL
erayalkis Apr 23, 2022
079f61b
Merge branch 'atapas:main' into main
erayalkis Apr 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 1 addition & 55 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,61 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="ReactPlay" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta name="twitter:card" content="summary_large_image" />
<meta
name="description"
content="ReactPlay is an open-source application to learn, create and
share ReactJS projects with the developer community."
data-react-helmet="true"
/>
<meta
property="og:description"
content="ReactPlay is an open-source application to learn, create and
share ReactJS projects with the developer community."
data-react-helmet="true"
/>
<meta
property="og:title"
content="ReactPlay - One app to learn, create, and share ReactJS projects."
data-react-helmet="true"
/>
<meta
property="og:image"
content="/og-image.png"
these
to
public
data-react-helmet="true"
/>
<meta
property="og:image:alt"
content="Start React Code Arena with ReactPlay"
data-react-helmet="true"
/>
<meta name="twitter:site" content="@ReactPlayIO" data-react-helmet="true" />
<meta
name="twitter:title"
content="ReactPlay - One app to learn, create, and share ReactJS projects."
data-react-helmet="true"
/>
<meta
name="twitter:description"
content="ReactPlay is an open-source application to learn, create and
share ReactJS projects with the developer community."
data-react-helmet="true"
/>
<meta
name="twitter:image"
content="/og-image.png"
these
to
public
data-react-helmet="true"
/>
<meta name="twitter:site" content="@ReactPlayIO" />

<!--
manifest.json provides metadata used when your web app is installed on a
Expand Down
3 changes: 2 additions & 1 deletion src/common/playlists/PlayMeta.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ function PlayMeta({ id, name, description, path, cover, component }) {
} else {
try {
// If not, try finding the cover.png in the play's folder
metaImage = require(`../../plays/${playFolder}/cover.png`);
metaImage = `https://reactplay.io${require(`../../plays/${playFolder}/cover.png`)}`; // It seems that
// some platforms such as Twitter need full, explicit URL's to display images correctly
} catch {
// If no image is available, cover stays as undefined
console.log("No cover available.");
Expand Down
9 changes: 2 additions & 7 deletions src/meta/DefMeta.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,14 @@ function DefMeta() {
/>
<meta
property="og:image"
content="/og-image.png" // React should default these to public
content="https://reactplay.io/og-image.png" // React should default these to public
data-react-helmet="true"
/>
<meta
property="og:image:alt"
content="Start React Code Arena with ReactPlay"
data-react-helmet="true"
/>
<meta
name="twitter:site"
content="@ReactPlayIO"
data-react-helmet="true"
/>
<meta
name="twitter:title"
content="ReactPlay - One app to learn, create, and share ReactJS projects."
Expand All @@ -54,7 +49,7 @@ function DefMeta() {
/>
<meta
name="twitter:image"
content="/og-image.png" // React should default these to public
content="https://reactplay.io/og-image.png" // React should default these to public
data-react-helmet="true"
/>
</Helmet>
Expand Down