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.
Related
hello im using NextJs <Head/> Tag from API , all meta tags work fine only the title meta doesn't show up correctly instead it shows the first H1 in page here's the code :
<Head>
<title>{prop.content.meta.title}</title>
<meta name="title" key="title" content={prop.content.meta.title} />
<meta name="description" content={prop.content.meta.desc}/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://metatags.io/"/>
<meta property="og:title" key="title" content={prop.content.meta.title}/>
<meta property="og:description" content={prop.content.meta.desc}/>
<meta property="og:image" content={prop.content.meta.image}/>
<meta property="twitter:card" content="summary_large_image"/>
<meta property="twitter:url" content="https://metatags.io/"/>
<meta property="twitter:title" key="title" content={prop.content.meta.title}/>
<meta property="twitter:description" content={prop.content.meta.desc}/>
<meta property="twitter:image" content={prop.content.meta.image}/>
</Head>
all meta tags work perfectly tho the title is showing up in the Tab title but when I test the meta tags I don't get the title comming from the API but I get the first h1 from page , here's image :
Note: I'm 100% sure that the title is coming from the API as it should be , and as I said it shows up correctly in {prop.content.meta.title} but not in Meta title
The issue was that I was testing the title with short words like 'Title1' and like that...
so when I used a kinda long sentence it worked, the issue was meta title tag has a minimum size to work
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.
This is my current configuration that adds the meta tags:
{data? <Helmet>
<title>Site- {data.name ? data.name : ""}</title>
<meta charSet="utf-8" />
<meta name="twitter:card" content="summary_large_image" data-react-helmet="true" />
<meta name="twitter:site" content="#user" data-react-helmet="true" />
<meta name="twitter:creator" content="#user" data-react-helmet="true" />
<meta property="og:type" content="website" data-react-helmet="true"/>
<meta property="og:url" content={document.location.href} data-react-helmet="true" />
<meta property="og:title" content={data.name ? data.name : ""} data-react-helmet="true" />
<meta property="og:description" content={data.description?.en?.slice(0, 65) + "..."} data-react-helmet="true" />
<meta property="og:image" content={data.image?.large} data-react-helmet="true" />
</Helmet>
: null}
data is a hook that is populated when the request from the database is done.
Trying on https://cards-dev.twitter.com/validator returns Unable to render Card preview. Any idea how it can be fixed?
I think its issue of CSR (Client Side Rendering). Twitter card fetch meta of link with JavaScript disabled so you need to fill meta on server response in that case you need SSR (Server Side Rendering).I recommend to try to use nextjs.org instead
I think you need to use different meta tags for twitter and maybe other sites, as link preview can be customized by the sites.
For example, this is saying that you need to use twitter:title, twitter:description and twitter:image.
I personally suggest to use react-seo-meta-tags with helmet as they seem to handle those kind of difficulties. You can check their official site.
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>