5

So I managed to index my website successfully, but I have this issue with the name of the search result snippet. I want it to show DuckMastersGames but instead it says 000webhostapp.com. I hope it’s not because I have the free plan. I personally think this can be fixed by some code, because I already managed to fix the image-type branding on my website using CSS code.

Here’s how it looks like now:

000webhostapp instead of my website name

What I want it to look like (I used inspect element for this):

Website name as search result snippet title

Can someone help me with this please?

I have tried to find the line of HTML/JavaScript code using inspect element on my page where 000webhostapp is interfering with the website title, and changing it so that it doesn't overwrite the name of my website (google results snippet name). But I found no code like that. So therefore, nothing has changed.

2

1 Answer 1

1

You need to use the <title> and <meta name="description"> tags to provide this content to Google.

As an example, here's the meta tags from my personal site at hyprtxt.dev

<title>Hyprtxt | Good Websites</title>
<meta name="author" content="Taylor Young" />
<meta
  name="description"
  content="Hyprtxt is Taylor's Brand. Webmaster for hire. Based in Prescott, AZ. Click on in!"
/>

SERP link here: https://www.google.com/search?q=hyprtxt.dev

These tags go inside the <head> tag of your HTML document.

I actually ended up adding Schema JSON to my website to try and take control.


const SchemaORG = () => {
  const Schema = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "Organization",
        "@id": "https://hyprtxt.dev/#organization",
        "url": "https://hyprtxt.dev/",
        "name": "Hyprtxt",
        "logo": {
          "@type": "ImageObject",
          "@id": "https://hyprtxt.dev/#logo",
          "url": "https://hyprtxt.dev/logo.png",
        },
        "sameAs": [
          "https://github.com/Hyprtxt",
          "https://www.facebook.com/Hyprtxt/",
          "https://twitter.com/Hyprtxt",
        ],
      },
      {
        "@type": "WebSite",
        "@id": "https://hyprtxt.dev/#website",
        "url": "https://hyprtxt.dev/",
        "name": "Hyprtxt.dev",
        "publisher": {
          "@id": "https://hyprtxt.dev/#organization",
        },
      },
    ],
  }
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(Schema, null, 2) }}
    >
    </script>
  )
}

That's JSX not HTML, but I still think it could help folks.

4
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Mar 26, 2023 at 20:33
  • 2
    The meta title and the description is already fine how it is. But my issue is with the text above it, right next to the website's icon. For example you have it as hyprtxt.dev. I want to change it from my hosting program name (000webhostapp.com) to DuckMastersGames. Commented Mar 26, 2023 at 20:58
  • I think this is the question for you: webmasters.stackexchange.com/questions/141610/… The stuff about schema.org is good, I have used it before just not on my own stuff. Commented Mar 26, 2023 at 21:01
  • Thank you very much! Commented Mar 26, 2023 at 21:07

Not the answer you're looking for? Browse other questions tagged or ask your own question.