Meta tag not working

Development
,
1

I have written the following code, but my meta tag isnt working:

Home I Moonbucks
Home Products Branches Home Delivery

About Us

We are the biggest coffeeholics in India! Ranked the most wanted café in India, we are all set to conquer the world with caffeine. We believe in fresh brews and you will find our cups of coffee hot and fresh with no ready-made mixes, rather made out of truly amazing recipies trained into the minds of our chefs!

Moonbucks Through the Years

2011:
Our inception!
2012:
Our first store opened on Bannarghatta Road, Bangalore.
2019:
We had the most owned and franchaised cafes in India
2023:
Ranked the best cafe chain in India

Inspiration: Coffee

Coffee is not just what you sip at 11 in the night trying to complete your work but also what leads many individuals to talk to each other and is the reason for many close interpersonal and business bonds. This was what inspired our founder, Mr. Hazeefa Baheera to open cafés and bring people together.

Moonbucks headquarter office:
No. 8, Bandra Kurla Complex(BKC), Bandra, Mumbai-400051
+91 90000 90000

Moonbucks, its logo and all the products and their names along with the website are trademarks of Moonbucks Pvt. Ltd.
&copy Moonbucks Pvt. Ltd.

By using this website and/or using our products, you hereby agree to our Terms and Conditions and Privacy Policy. To read the terms and conditions and privacy policy, please click on the icon below:

image
image1412×896 79.5 KB

2

Hi @huzaifa.bohori

Your code syntax looks fine. Can elaborate more on the error you are facing?

Here are some common issues that might cause the meta tag to not work

  • Browser Cache: Sometimes, the browser cache can cause issues. Try clearing the cache or opening the page in an incognito window.
  • Meta Tag Syntax: Ensure the meta tag is correctly placed in the <head> section of your HTML file, and it appears to be correct from your provided code:
  • CSS or JavaScript Overrides: Make sure there are no CSS rules or JavaScript code that could be overriding the viewport settings. Check your coffeeshop.css and any linked JavaScript files for any media queries or scripts that might alter the viewport settings.
  • HTML Structure: Ensure the HTML structure is valid and correctly formed. From the provided screenshot, the structure seems fine.

do try this and let us know if it solves the issue.

3

Please inform us what the expected output of the Meta Tag for this code should be.

Till then here are the syntaxs for common uses of the meta tag:

  1. Character Encoding (UTF-8):
<meta charset="UTF-8">
  1. To set a short description for the page (Meta Description):
<meta name="description" content="Free Web tutorials for HTML and CSS">
  1. To set up keywords for search engines:
<meta name="keywords" content="HTML, CSS, JavaScript">
  1. To set up author information:
<meta name="author" content="John Doe">
  1. To change viewport settings
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4

i wanted my meta tag to responsively resize the page to fit different screen sizes appropriately

5

Hi @huzaifa.bohori
Instead of using meta tag to make the page responsive we can use CSS .
We can change the properties of the elements in the html page to suit the screen size.

@media (min-width: 600px) {
            .classname{
              <!--Alter the properties to make the element suitable for a small screen.-->
            }
        }
6

Thank you so much. That helped.

2 Likes
7

It seems like you might be referring to troubleshooting issues with meta tags or viewport settings in HTML. If you’re encountering problems with the meta tag not working as expected, here are some additional steps and considerations you can explore:

  1. Viewport Meta Tag: Ensure the viewport meta tag is correctly placed within the <head> section of your HTML document. Here’s an example of how it should typically appear:

    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Other meta tags and links to CSS/JavaScript -->
</head>

    width=device-width: Ensures the width of the viewport is set to the device’s screen width.
    initial-scale=1.0: Sets the initial zoom level when the page is first loaded.

  2. Testing in Different Environments:
    Clear browser cache or try accessing the page in an incognito/private window to rule out cache-related issues.
    Test on different devices (desktop, tablet, mobile) to see if the viewport settings respond as expected across various screen sizes.

  3. CSS and JavaScript Interference:
    Check your CSS (coffeeshop.css) for any media queries or styles that might affect viewport behavior.
    Ensure there are no JavaScript scripts altering viewport settings dynamically.

  4. HTML Validation:
    Validate your HTML markup using tools like the W3C Markup Validation Service (https://validator.w3.org/) to ensure there are no structural issues affecting meta tag parsing.

  5. Browser-Specific Considerations:
    Different browsers may interpret viewport meta tags slightly differently. Test your page across multiple browsers (Chrome, Firefox, Safari, Edge) to ensure consistency.

If you’ve already covered these steps and are still encountering issues, providing more specific details about the problem or any error messages you’re seeing would help in further troubleshooting. Let me know how it goes or if there’s more I can assist you with!

8

Hi @huzaifa.bohori

Good to hear that your issue is resolved. Happy learning !

9

try this syntax:

Meta Tag Example

Meta Tag Example

This is a simple HTML document demonstrating various meta tags.