Weebly offers easy to build website builder with free hosting. Though the free features are sufficient to launch your website, you can only publish it under Weebly subdomain. Therefore, we recommend you to go for premium plans to connect your custom domain name to Weebly site. No matter, you use free or premium plan, Weebly allows you to add logo to your website. In this article, we will explain how to upload logo in Weebly and add alt text to logo image.
Uploading Logo to Weebly Site
Login to your Weebly account and land on your dashboard section. Click on the dropdown on the right sidebar and choose your website. After that, click on the “Edit Website” button to go to Weebly site editor.
Hover your mouse over the site title on the header section of your site.
By default, the site title you provide during creation of your site will show on the header. If you do not see title, just hover the mouse on the top content area to view the menu option for logo. As you can see, Weebly allows three options to use logo on your site.
- Off – turn off the logo
- Text – use text logo
- Logo – use image logo
Click on “Logo” option to option image uploader in Weebly.
Upload or Use URL
There are two options to use your logo. Uploading your own logo or use the URL from third-party websites.
Uploading Your Own Logo
Go to “My Computer” tab and click on “Upload a photo from your computer”. Choose the logo file from your computer and upload on your site. In this way, your logo file will be uploaded on your site which you can edit and add alt tag.
Using Logo Image URL
Alternatively, you can go to “Image URL” tab and paste the URL of your logo image. This is useful when you want to use image from any third-party website.
We do not recommend using image URL due to the following reasons:
- As far as we have tested, this option does not work properly in Weebly.
- Many third-party websites do not allow embedding images. This is called hotlinking to safeguard their server resources.
- You cannot edit the logo in this case.
- Unsupported logo will show as a broken image like below affecting your site’s credibility.
Editing Your Logo
After uploading your custom logo, you can remove or edit within Weebly editor. Hover over the logo image and click on the trash button.
Confirm deleting the logo by clicking on “Yes, remove” button.
If you want to edit your logo image, then hover over it and choose “Edit” button. Your logo will open in a Weebly image editor. There are lot of options to crop, set filters, adjust colors, add text and set focus.
After editing the logo, click on “Save” button to re-upload the edited logo.
Add Alt Tag to Logo in Weebly
After finishing editing your own logo file, publish your website. You can first check whether the logo has an alt tag.
- Open the site in any browser.
- Right click on your logo and select “Inspect” or “Inspect Element” option.
- This will open the developer console in the browser.
- Check whether your logo has alt tag attribute.
As you can see in the above screenshot, the uploaded logo does not have any alt tag attribute. Weebly does not have an option to add alt tag to your logo. You need to follow some trick to add the logo.
- Go back to your Weebly editor and navigate to “Settings” section.
- Under “General” tab, check your site has a “Site Title”.
- Now, go to “Build” tab and hover over your logo image.
- Select, Text” for the logo. It should show the site title as your text logo now.
- Weebly uses Site Title as your text logo. When you edit the text logo, your site title will also change. We strongly recommend using your brand name or site name as your site title (which is also your logo text).
- Publish your site, which will show the text logo.
- Go back to the Weebly editor and select “Logo” option to turn off text and enable the logo image.
- Publish your site and check the site in browser’s developer console, which should have an alt text for the logo image.
Sometimes, Weebly editor behaves erratically. Basically, you have to publishing the site with text logo and then republish with image logo. This will take the site title as your image logo’s alt attribute. Make sure to clear browser’s cache when you check the source code multiple times.
Why Alt Tag is Important
Alt tag is important for any image for the following two reasons:
- Accessibility – alt tag help screen readers to understand images. Though, showing site title as alt tag in Weebly may not help in this case, at least it is better than having no alt text.
- SEO – logo image is available as part of the header and shown on all the pages of your site. When you generate SEO report or do SEO audit, you will get missing alt tag issue for the logo image on each page. By adding alt tag as explained above, you can get rid of this SEO issue permanently.