Since one month I always tried to fix my mobile SERP favicon and google recrawled my site many times in the meantime. Even though it's still not working. The GSC isn't showing it either, same with Lighthouse...
What have I done wrong?
Here is my favicon code:
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="https://eselsbruecken-generator.de/data/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://eselsbruecken-generator.de/data/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://eselsbruecken-generator.de/data/favicon-16x16.png">
<link rel="manifest" href="https://eselsbruecken-generator.de/data/site.webmanifest">
<link rel="mask-icon" href="https://eselsbruecken-generator.de/data/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="https://eselsbruecken-generator.de/data/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/data/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<!-- favicon end -->
I am grateful for anything helpful...
Have a nice day!
When i run the npm run build its give me the build but when i place it in the tomcat webapps its so me error
Failed to load resource: the server responded with a status of 404 ()
But when i place the . in html file its work.
Code its not working:-
<head>
<meta charset="utf-8" />
<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="8080/build/logo192.png" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="manifest" href="8080/build/manifest.json" />
<title>GV App</title>
<script defer="defer" src="8080/build/static/js/main.99658d36.js"></script>
<link href="8080/build/static/css/main.0dd94b59.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
Code its working when i place the dot like href="./logo192.png" :-
<head>
<meta charset="utf-8" />
<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="./logo192.png" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="manifest" href="./manifest.json" />
<title>GV App</title>
<script defer="defer" src="./static/js/main.55119f6e.js"></script>
<link href="./static/css/main.d962d6c3.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
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>
I can't see my meta tags on my source code.
I see my tags only when I inspect my page on Elements . Is it enough to show meta tags in elements to correctly register my page on search engines?
I'm using React Helmet without a server.
Home page:
import {Helmet} from 'react-helmet';
export default class Home extends Component {
render() {
return (
<div>
<Helmet>
<meta charSet="utf-8" />
<title>Home</title>
<link rel="canonical" href="https://somedomain.com/" />
<meta name="description" content="Description here ......." />
</Helmet>
......
My index.html file:
<!DOCTYPE html>
<html lang="en">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<head>
</head>
<body>
<div id="root"></div>
</body>
</html>
Output inspect Elements:
<title>Home</title>
<link rel="canonical" href="https://somedomain.com/" data-react-helmet="true">
<meta charset="utf-8" data-react-helmet="true">
<meta name="description" content="Description here ......" data-react-helmet="true">
Output Source code:
<!doctype html><html lang="en"><link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><head><link href="/static/css/2.69121389.chunk.css" rel="stylesheet"><link href="/static/css/main.8a7e4572.chunk.css" rel="stylesheet"></head><body><div id="root"></div><script>!function(e){function t(t){for(var n,i,l=t[0],f=t[1],a=t[2],c=0,s=[];c<l.length;c++)i=l[c],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&s.push(o[i][0]),o[i]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);for(p&&p(t);s.length;)s.shift()();return u.push.apply(u,a||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,l=1;l<r.length;l++){var f=r[l];0!==o[f]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/";var l=this["webpackJsonpmy-website"]=this["webpackJsonpmy-website"]||[],f=l.push.bind(l);l.push=t,l=l.slice();for(var a=0;a<l.length;a++)t(l[a]);var p=f;r()}([])</script><script src="/static/js/2.c77f8540.chunk.js"></script><script src="/static/js/main.69bc3bde.chunk.js"></script></body></html>
I'm new to React material-ui. I used their guide and created simple Appbar (same as theirs). However, my appbar looks different than theirs:
My Appbar:
It should've looked like this:
https://codesandbox.io/s/m3m1x5qxw8
I have installed npm install #material-ui/core
I have added Roboto fonts to my index.html in the head part.Here is a screenshot of my index.html
My code is literally same as their code, only changed the function name. However, this AppBar is located under this:
<div> // it is the root div
<Header2/> // the appbar
Their color is not the same, their font is not the same.
What did I do wrong?
As it turns out I shouldn't be using react material-ui and react-bootstrap together:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
I intend to use react-material-ui, but for those who wants to use both of them together, if you have a solution, please share it :)