DEV Community

loading...
Cover image for Before You Share Your React App, Change index.html

Before You Share Your React App, Change index.html

kahawaiikailana profile image Kailana Kahawaii ・2 min read

React is a great framework to get a project up and running quickly. Running npx create-react-app my-app will give you a functioning website in seconds. That being said, it’s always a good idea to change your meta data before sharing your React app widely.

Doing so is easy!

Change meta data

Navigate to index.html in the public directory and find the head tag.

shows meta data in the head tag

See that text Web site created using create-react-app? Let's change it.

In the meta tag, change content="Web site created using create-react-app" to a short description of your website.

Shows boilerplate content in metatags

This type of information is shared whenever you embed your website on a social media page, so creating a short and informative description will let your user know what kind of website they’ll be viewing.

Shows changed meta data

Change the title

At the bottom of the head tag you’ll find the title tag. This title corresponds to the text you see on the browser tab.

Title tag in code

React app title tab

Change the name of the React App to whatever you’ve named your website.

Changed title tag in code

Changed title tab

Further changes

There’s other boilerplate code you may want to modify in the index.html file and elsewhere. Personally, I find it useful to delete the image files create-react-app comes with (with exception to the favicon file).

public folder with favicon.ico and index.html

A favicon is the 16 x 16 px image next to the title of your website (usually a logo). React uses their own logo, but you can easily delete that file and replace it with your own logo. Be sure to keep the file name the same for a quick change.

Summary

These quick changes can make a great impression when sharing your app. Not only are they descriptive (which is what search engines love), they also show that you pay attention to detail. The next time you share your app, be sure to make these changes.

Discussion

pic
Editor guide
Collapse
stereoplegic profile image
Mike Bybee

Change your README.md. I'm not sure there's anything more annoying than seeing the CRA default in a GitHub repo.

Collapse
kahawaiikailana profile image
Kailana Kahawaii Author

That too! Thanks for sharing.