How to change title of google search list title - reactjs

In this image you can see the result of codevaly it's show with my web title but i changed the title of my website to "codevaly" but still it return "my web", please help me to fix it
Click To View Image
It is my html file of react js project
Click To View Image
Now, Please point out my mistake.

Next time, insert your code and your problem in text. Pictures are frowned upon on Stackoverflow. Have you changed the title recently? If so, you might just need to wait for a google crawler to visit your page again.
More info can be found in the google search docs. Some other thing could improve the title, such as including an H1 element on your page that repeats the name.

It looks like your title and description both are not updated.
There are two possibilities for this
You have not deployed the recent code in production.
If not the first case then wait for google to crawl through your page.
Try checking with this site:Your site URL to list out all the links in your web app.
Thanks.

Related

my react firebase custom domain title and description doesnt change

I have my react website hosted on firebase with custom domain, the domain is added to google search console/google webmaster, the problem is the title and description of website does not change when i search my website on google.com.it keeps showing old title and description.i have tried react helmet, react meta tags, browser clear history, even tried with simple html file deployment, the title and description does not change.Thanks for helping.
It looks like you'll need to ask google to recrawl the website if you would like it changed quicker than it would take google to revist the site organically. There are details on how to do this here: https://developers.google.com/search/docs/advanced/crawling/ask-google-to-recrawl
Ultimately you'll need to Inspect the URL using the URL Inspection tool. Details on how to do this are in the link above.

Twitter summary card image is not always displayed

So i have a website which is builded with NextJS and i'm using Next SEO plugin for filling the meta tags necessary for twitter and facebook info...
I have card type option set to summart_large_image
<meta name="twitter:card" content="summary_large_image">
i can see that it's added to the website and it does work for some of the posts ... but something weird is happening , for example two of the tweets will have card with large image and then three of them would be just plain text with the link ...
I have a CMS in Silex where it's implemented automatic posting on twitter with twitter's API... and basicly i'm just posting a string with the link and some additional comment about it ... when i try do debugg with the twitter card validator it does work properly but not on my account ...
here's a screenshot for better explanation, the red ones are cards with large image and the blue ones have only text with link
All the posts have the same structure and equal size provided for the og:image tag.... all of them are equal basicly
Edit:
This is the twitter account in question for more clarity : https://twitter.com/someecards
Edit:
Now i even got a summary card with small image on a post which contains meta tag "summary_large_image" , and when i run the same link throught the link validator i'm getting the desired result
Link validator:
It looks like sometimes Twitter is not able to build the Card Preview (maybe a timeout when fetching the data or image) and, after that, the link is never accessed again, hence the preview is not rebuilt.
You can validate the preview with the Twitter Card Validation tool but it will probably work and show the correct link.
I have explained how the Card Preview works and limitation in a blog post, and created a tool to work around it.
In your case I would make sure the page is built before you post it onto Twitter, to make sure it is ready and served with minimum delay when the Twitter bot access it to generate the preview.

Duplicate in Gatsby path to markdown file for blog post

I am editing this Gatsby starter to make a personal website: https://www.gatsbyjs.org/starters/rolwin100/rolwinreevan_gatsby_blog/
Note that the problem I'm having with my site also happens when I develop the starter (with no changes made).
My desired outcome is pretty simple, I just want to be able to click on a blog post at site-name.com/blog/post-name that works. So, I set the path in my markdown files to be blog/post-name, replicating the starter exactly. However, when I run gatsby develop and click on the posts, the weirdest thing happens, For ex, from running the starter I get: There's not a page yet at /blog/blog/code-splitting-in-react (pictured fully below). But the page /blog/code-splitting-in-react does exist and when you adjust the url to that it brings up the page perfectly.
So the question is-- where is that extra 'blog' coming from in the path and how do I get rid of it??
error messages when I click on a blog post
You said that you are setting the url to blog/post-name. That is a relative path. It is going to start from whatever url you currently are. For example if you are in http://example.com/bla/foo you'll end in http://example.com/bla/foo/blog/post-name. You need to add a slash at the beginning: /blog/post-name.

how to dynamically set title and description of angular single page application for google bot?

i want google bot to recognize titles and descriptions of my pages, the title and descriptions are coming from the database..
i used
document.title = $scope.dataFetchedFromDB.title;
and
document.querySelector("meta[name='description']").content = $scope.dataFetchedFromDB.description;
and it does change the title and description in the browser, but not in the snippets fetched by google or facebook or slack.... the old title and description remains.
i know about ng-meta npm package, but i dont have my pages on static route, the route is determined by the page ID (every page has its ID and its description and title)
i also read
Remember that while Google says that they use JavaScript to crawl pages, Facebook, Twitter, etc., do not. You can test Google's render of your page from the links here.
But Google takes a while to index these changes in their snippets. I would recommend creating a Google Search Console account and having it fetch-and-render the pages you want it to re-index. Even then, public results make take days or weeks to reflect your changes.
Also, it seems that the Googlebot with Javascript doesn't have a lot of patience. Try to make sure you are changing your Title and Description within mere moments of the page loading, and not at the end. In little tests, it appears that the Googlebot renderer may time-out after a few seconds, and only capture the original Title and Description.
In order to get other sites like Facebook/Twitter to render the proper metadata, you'll need to server-side render these pieces of data. Whatever appears when you say "View Source..." will be seen by these simplified crawlers. Consider updating to Angular (from AngularJS) and try server-side rendering for your metadata.

Weird Content of Facebook share/like button preview from angular app

I have an issue with share/like button from Angular app. I finally made it working correctly with links but share/like preview if completely wrong. I tried XFBML.parse(), switching to html 5 mode, etc.
There are two complete enigmas:
1. I got "Given URL is not allowed by the Application configuration..." despite adding all possible variants to fb app setting.
When share preview appear - it has "Angular", but I never added it anywhere.
Here is the link
Would be grateful for any ideas...
Thx
The Facebook Scraper only looks at the HTML code your server delivers, it does not execute any JavaScript.
So if you want to share different articles, you need an individual URL for each article, that delivers the relevant meta data when requested from the server.
You can find some more explanation and hints on how to implement this in this article, http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app

Resources