I'm deploying a React App in Netlify. I've made few changes to make my custom icon and the name of my App appears in the browser's tab, but it just shows the name, not the icon.
These are the changes that I've made:
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="The Mini Blog" content="The Mini Blog" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/blog-pic.png" />
<title>The Mini Blog</title>
</head>```
To be more specific. The favicon.ico is the image that I want to use as icon in the tab. I did that change in the first <link> tag.
In the second <link> tag I added the same icon that is in favicon.ico but under the name "blog-pic.png"
And last, the title tag with the name of my app.
Noteworthy that when I run my app locally displays everything fine.
Thanks in advance.
Related
im trying to change the title of my website in google search but i can't seem to find how to do it. I saw something about react-helmet i couldn't figure out how to use it in my files. Im trying to change the title and description of my website and also pages. I made website in react.js and i host it on apache2.
Change the title and description in the index.html file of our React App and then rebuild the app.
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="**Web site created using create-react-app**"
/>
<title>React App</title>
Hope this helps. Let me know if this works for you.
I got my logo which is an SVG file for my react project which is saved in my images folder , i wanted to use this SVG icon on my browser tab , am i able to use SVG files ? and how i can link to it , i tried doing the following in the head tag in the index.html file but didnt work .
<head>
<meta charset="utf-8" />
<link rel="icon" href="src\images\logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="src\images\logo.svg" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700&family=Mulish:wght#300;400;700&family=Playfair+Display:wght#700&display=swap"
rel="stylesheet"
/>
<title>Thousand Sunny Travel Agency</title>
</head>
Here is the meta tags i have in my react app but still in twitter share i cant see any image. i use react-share library.
<meta property="og:url" content="https://test.com" />
<meta property="og:type" content="article" />
<meta property="og:description"content="Coding tales" />
<meta property="og:image" content="%PUBLIC_URL%/Test.png" />
<meta name="twitter:title" content="Test Blog">
<meta name="twitter:description" content="Coding tales">
<meta name="twitter:image" content="%PUBLIC_URL%/Test.png">
<meta name="twitter:card" content="summary">
<title>Test Blog</title>
In the validator of twitter i get :
INFO: Page fetched successfully
INFO: 12 metatags were found
INFO: twitter:card = summary tag found
INFO: Card loaded successfully
You need an absolute path for og:image or twitter:image - like https://....
Relative paths aren't supported by Twitter... I don't think is documented but this is how it works in fact.
Having setup metatags for sharable pages via a heroku-hosted react web app. I've noticed that Twitter cards are not being properly presented, despite page source correctly presenting twitter and og meta data.
Given the below - Is there anything I haven't considered yet?
Javascript:
I have tested with javascript disabled, and the site still renders correctly, with correct meta tags
Image Size:
Is within defined limits - 434px X 650px, 94KB
Hosting:
Hosted on Herokuapp, the URL is still using the herokuapp domain (hasn't been switched to a production url)
expressFullURL : https://project.herokuapp.com/share/[ID]
Image Hosting:
Images are referencing AWS S3 buckets in the url https://media.project.aws/[etc]
Robots:
The site does not have a robots.txt file
Below, is the head meta content:
twitter.image URL is dynamically loaded in
twitter.url, which is also dynamic using express to generate the full URL (http://project.com/share/page/1234)
<!-- basic meta -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<meta content="text/html; charset=UTF-8" name="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- content meta -->
<meta name="description" content="description content" />
<meta name="copyright" content="Copyright 2019" />
<!-- Twitter meta -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:site" content="#handle">
<meta property="twitter:image" content="${image.url}">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="${expressFullURL}">
<meta property="twitter:title" content="Title">
<meta property="twitter:description" content="description content">
<!-- opengraph data -->
<meta property="og:title" content="Title" />
<meta property="og:description" content="description content" />
<meta property="og:url" content="${expressFullURL}" />
<meta property="og:image" content="${image.url}" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Site Name" />
Using https://cards-dev.twitter.com/validator
the response is:
INFO: Page fetched successfully
WARN: No metatags found
Meta is correct on page, so can't understand why no metatags can be found
I had a similar situation, but seem to have it working. I kept an eye on the Heroku logs heroku logs --tail while clicking the validator preview button. Turns out I was getting a 500 error from my app, because of the format of the request from the validator. Might be worth a check.
I made a couple of observations that I'd like to document as an answer here:
A <meta charset="utf-8"> tag is required.
The twitter:image tag needs a full HTTPS URL, like https://host.com/some/image.jpg.
The twitter card validator needs to be refreshed for each change. It is not enough to just click on the "Preview Card" button again, you need to reload the webpage (CMD-R on the Mac) and enter the card URL in the text field. Otherwise the validator doesn't seem to load the latest changes.
The error message"INFO: Page fetched successfullyWARN: No metatags found"is
completely misleading. It is shown even if the URL doesn't exist.
A minimum working example is:
<html>
<head>
<meta charset="utf-8">
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="#username"/>
<meta name="twitter:title" content="A title"/>
<meta name="twitter:description" content="A description."/>
<meta name="twitter:image" content="https://host.com/some/image.jpg"/>
</head>
<body>
</body>
</html>
<meta property="og:url" content="mysite.com/" />
<meta property="og:type" content= "article"/>
<meta property="og:title" content="content title" />
<meta property="og:description" content="content description" />
<meta property="og:image" content="/image.jpg" />
React helmet is unable to update the meta tag of index.html file. I have deployed my application in nginx server which renders index.html file for all routes. There is no any server side routing done for this project. How to fix this issue ?