[{"data":1,"prerenderedAt":2422},["ShallowReactive",2],{"/blog/how-search-crawlers-read-robots-txt-rules":3,"recommended-/blog/how-search-crawlers-read-robots-txt-rules":609},{"id":4,"title":5,"author":6,"body":7,"category":592,"date":593,"description":594,"draft":595,"extension":596,"image":597,"meta":598,"metaTitle":599,"navigation":109,"path":600,"seo":601,"stem":602,"tags":603,"__hash__":608},"blog/blog/how-search-crawlers-read-robots-txt-rules.md","How Search Crawlers Actually Read Robots.txt Rules?","Ganesh Kanse",{"type":8,"value":9,"toc":568},"minimark",[10,15,19,22,25,28,33,36,39,61,64,67,71,78,81,123,134,137,144,150,153,173,180,183,189,194,196,205,211,214,216,225,228,231,233,247,250,256,261,263,282,289,292,296,299,302,305,308,327,338,341,345,348,351,363,366,369,373,376,378,391,394,403,409,412,416,419,422,425,428,432,437,440,444,447,451,454,458,461,465,468,472,475,478,498,501,515,518,522,525,542,545,549,552,555,558,561,564],[11,12,14],"h1",{"id":13},"how-search-crawlers-actually-read-robotstxt-rules","How Search Crawlers Actually Read Robots.txt Rules",[16,17,18],"p",{},"Robots.txt looks simple until you have to edit it.",[16,20,21],{},"A few lines of text can control how bots interact with an entire website, yet many marketers and site owners publish rules without fully understanding how crawlers interpret them. That is where problems begin. A seemingly harmless file can block useful sections, conflict with other directives, or send mixed signals during a site launch.",[16,23,24],{},"If you want to use robots.txt confidently, you need to understand how crawlers read the file in practice, not just what the syntax looks like.",[16,26,27],{},"This guide explains how search crawlers interpret robots.txt rules, how matching works, and where teams most often get tripped up.",[29,30,32],"h2",{"id":31},"where-do-crawlers-look-for-robotstxt","Where do crawlers look for robots.txt?",[16,34,35],{},"Crawlers look for the robots.txt file in the root of the domain or subdomain they are visiting.",[16,37,38],{},"That means:",[40,41,42,53],"ul",{},[43,44,45,49,50],"li",{},[46,47,48],"code",{},"https://example.com/robots.txt"," applies to ",[46,51,52],{},"example.com",[43,54,55,49,58],{},[46,56,57],{},"https://blog.example.com/robots.txt",[46,59,60],{},"blog.example.com",[16,62,63],{},"Each host needs its own file if you want separate rules. A robots.txt file on the main domain does not automatically control a subdomain.",[16,65,66],{},"This is a common oversight during multi-site or international setups.",[29,68,70],{"id":69},"the-structure-of-a-robotstxt-file","The structure of a robots.txt file",[16,72,73,74,77],{},"Robots.txt is made up of groups of rules. Each group typically starts with a ",[46,75,76],{},"User-agent"," line followed by instructions for that bot.",[16,79,80],{},"Example:",[82,83,88],"pre",{"className":84,"code":85,"language":86,"meta":87,"style":87},"language-txt shiki shiki-themes github-light github-dark","CopyUser-agent: *\nDisallow: /private/\n\nUser-agent: Googlebot\nDisallow: /test/\n","txt","",[46,89,90,98,104,111,117],{"__ignoreMap":87},[91,92,95],"span",{"class":93,"line":94},"line",1,[91,96,97],{},"CopyUser-agent: *\n",[91,99,101],{"class":93,"line":100},2,[91,102,103],{},"Disallow: /private/\n",[91,105,107],{"class":93,"line":106},3,[91,108,110],{"emptyLinePlaceholder":109},true,"\n",[91,112,114],{"class":93,"line":113},4,[91,115,116],{},"User-agent: Googlebot\n",[91,118,120],{"class":93,"line":119},5,[91,121,122],{},"Disallow: /test/\n",[16,124,125,126,129,130,133],{},"This tells all crawlers to avoid ",[46,127,128],{},"/private/",", while Googlebot is specifically told to avoid ",[46,131,132],{},"/test/",".",[16,135,136],{},"At a high level, crawlers first identify which group applies to them, then evaluate the rules within that group.",[29,138,140,141,143],{"id":139},"what-user-agent-means","What ",[46,142,76],{}," means?",[16,145,146,147,149],{},"The ",[46,148,76],{}," line identifies which bot a rule set is meant for.",[16,151,152],{},"Examples:",[40,154,155,161,167],{},[43,156,157,160],{},[46,158,159],{},"User-agent: *"," means all crawlers",[43,162,163,166],{},[46,164,165],{},"User-agent: Googlebot"," means Googlebot specifically",[43,168,169,172],{},[46,170,171],{},"User-agent: Bingbot"," means Bing's crawler specifically",[16,174,175,176,179],{},"The wildcard ",[46,177,178],{},"*"," is the fallback group. If a crawler finds a more specific matching group for its user agent, it may use that instead of the general one.",[16,181,182],{},"This matters when you mix broad rules with bot-specific instructions.",[29,184,140,186,143],{"id":185},"what-disallow-means",[46,187,188],{},"Disallow",[16,190,191,193],{},[46,192,188],{}," tells a crawler not to access a specific path.",[16,195,80],{},[82,197,199],{"className":84,"code":198,"language":86,"meta":87,"style":87},"CopyDisallow: /admin/\n",[46,200,201],{"__ignoreMap":87},[91,202,203],{"class":93,"line":94},[91,204,198],{},[16,206,207,208,133],{},"This means the crawler should not request URLs that begin with ",[46,209,210],{},"/admin/",[16,212,213],{},"You can also block a single URL path more precisely.",[16,215,80],{},[82,217,219],{"className":84,"code":218,"language":86,"meta":87,"style":87},"CopyDisallow: /draft-page\n",[46,220,221],{"__ignoreMap":87},[91,222,223],{"class":93,"line":94},[91,224,218],{},[16,226,227],{},"That tells the crawler not to access that path.",[16,229,230],{},"A blank disallow line means nothing is blocked.",[16,232,80],{},[82,234,236],{"className":84,"code":235,"language":86,"meta":87,"style":87},"CopyUser-agent: *\nDisallow:\n",[46,237,238,242],{"__ignoreMap":87},[91,239,240],{"class":93,"line":94},[91,241,97],{},[91,243,244],{"class":93,"line":100},[91,245,246],{},"Disallow:\n",[16,248,249],{},"That effectively allows full crawling.",[29,251,140,253,143],{"id":252},"what-allow-means",[46,254,255],{},"Allow",[16,257,258,260],{},[46,259,255],{}," is used to make an exception within a blocked section.",[16,262,80],{},[82,264,266],{"className":84,"code":265,"language":86,"meta":87,"style":87},"CopyUser-agent: *\nDisallow: /images/\nAllow: /images/public-logo.png\n",[46,267,268,272,277],{"__ignoreMap":87},[91,269,270],{"class":93,"line":94},[91,271,97],{},[91,273,274],{"class":93,"line":100},[91,275,276],{},"Disallow: /images/\n",[91,278,279],{"class":93,"line":106},[91,280,281],{},"Allow: /images/public-logo.png\n",[16,283,284,285,288],{},"This says the crawler should avoid the ",[46,286,287],{},"/images/"," folder generally, but it may still access one specific file.",[16,290,291],{},"This is especially useful when broad directories contain a few assets or pages that still need to be crawled.",[29,293,295],{"id":294},"how-does-matching-work","How does matching work?",[16,297,298],{},"This is where many misunderstand robots.txt.",[16,300,301],{},"Crawlers do not read your intent. They read path patterns.",[16,303,304],{},"In practice, the most relevant matching rule usually wins based on specificity. More specific path instructions tend to override broader ones.",[16,306,307],{},"For example:",[82,309,311],{"className":84,"code":310,"language":86,"meta":87,"style":87},"CopyUser-agent: *\nDisallow: /blog/\nAllow: /blog/public-guide/\n",[46,312,313,317,322],{"__ignoreMap":87},[91,314,315],{"class":93,"line":94},[91,316,97],{},[91,318,319],{"class":93,"line":100},[91,320,321],{},"Disallow: /blog/\n",[91,323,324],{"class":93,"line":106},[91,325,326],{},"Allow: /blog/public-guide/\n",[16,328,329,330,333,334,337],{},"In this case, the broader ",[46,331,332],{},"/blog/"," path is blocked, but the more specific ",[46,335,336],{},"/blog/public-guide/"," path is allowed.",[16,339,340],{},"This is why precise path planning matters. One misplaced slash or overbroad directory rule can affect far more URLs than expected.",[29,342,344],{"id":343},"why-do-trailing-slashes-matter","Why do trailing slashes matter?",[16,346,347],{},"Path matching is literal enough that structure matters.",[16,349,350],{},"These are not always equivalent:",[40,352,353,358],{},[43,354,355],{},[46,356,357],{},"/folder",[43,359,360],{},[46,361,362],{},"/folder/",[16,364,365],{},"Depending on how your site structures URLs, a mismatch here can make rules behave differently than expected.",[16,367,368],{},"That is why robots.txt changes should always be reviewed against real URLs, not assumptions about folder naming.",[29,370,372],{"id":371},"wildcards-and-special-characters","Wildcards and special characters",[16,374,375],{},"Some crawlers support pattern matching with wildcards.",[16,377,307],{},[40,379,380,385],{},[43,381,382,384],{},[46,383,178],{}," can represent any sequence of characters",[43,386,387,390],{},[46,388,389],{},"$"," may be used to match the end of a URL",[16,392,393],{},"A rule like this:",[82,395,397],{"className":84,"code":396,"language":86,"meta":87,"style":87},"CopyDisallow: /*.pdf$\n",[46,398,399],{"__ignoreMap":87},[91,400,401],{"class":93,"line":94},[91,402,396],{},[16,404,405,406,133],{},"is meant to block URLs ending in ",[46,407,408],{},".pdf",[16,410,411],{},"Pattern support varies by crawler, so the safest approach is to keep rules as clear and simple as possible unless you genuinely need advanced matching.",[29,413,415],{"id":414},"the-order-of-rules-vs-the-specificity-of-rules","The order of rules vs the specificity of rules",[16,417,418],{},"A common myth is that crawlers obey the first matching line they see.",[16,420,421],{},"In reality, robots.txt is less about a top-to-bottom reading order and more about which applicable rule best matches the requested path.",[16,423,424],{},"That is why \"I put the allow line first\" is not a reliable strategy on its own. The path's specificity matters more than the visual order in many cases.",[16,426,427],{},"Think like a pattern matcher, not like a human reader.",[29,429,431],{"id":430},"common-robotstxt-interpretation-mistakes","Common robots.txt interpretation mistakes",[433,434,436],"h3",{"id":435},"_1-blocking-a-folder-too-broadly","1. Blocking a folder too broadly",[16,438,439],{},"A team wants to block duplicate tag pages but accidentally blocks the main blog archive folder as well.",[433,441,443],{"id":442},"_2-assuming-all-bots-behave-identically","2. Assuming all bots behave identically",[16,445,446],{},"Different crawlers may support different features or interpret edge cases differently.",[433,448,450],{"id":449},"_3-forgetting-that-subdomains-need-separate-files","3. Forgetting that subdomains need separate files",[16,452,453],{},"A staging subdomain or help centre may remain crawlable because only the root domain file was edited.",[433,455,457],{"id":456},"_4-mixing-crawl-control-with-indexing-goals","4. Mixing crawl control with indexing goals",[16,459,460],{},"Teams add a disallow rule and assume the URL will disappear from search results. That is not how robots.txt works.",[433,462,464],{"id":463},"_5-leaving-legacy-rules-in-place-after-migrations","5. Leaving legacy rules in place after migrations",[16,466,467],{},"Old disallowed paths often survive redesigns and quietly interfere with new sections.",[29,469,471],{"id":470},"how-to-read-your-own-file-like-a-crawler","How to read your own file like a crawler?",[16,473,474],{},"A practical way to review robots.txt is to test it against actual URLs.",[16,476,477],{},"Take important URLs from:",[40,479,480,483,486,489,492,495],{},[43,481,482],{},"your sitemap",[43,484,485],{},"your main navigation",[43,487,488],{},"category pages",[43,490,491],{},"blog posts",[43,493,494],{},"media folders",[43,496,497],{},"utility pages",[16,499,500],{},"Then ask:",[40,502,503,506,509,512],{},[43,504,505],{},"Which user-agent group applies?",[43,507,508],{},"Does any disallow rule match this path?",[43,510,511],{},"Does a more specific allow rule override it?",[43,513,514],{},"Was this result intentional?",[16,516,517],{},"If you cannot answer those questions quickly, your file may be too complex.",[29,519,521],{"id":520},"best-practices-for-cleaner-rules","Best practices for cleaner rules",[16,523,524],{},"To make robots.txt easier for crawlers and humans alike:",[40,526,527,530,533,536,539],{},[43,528,529],{},"Keep rules short and deliberate",[43,531,532],{},"Avoid unnecessary complexity",[43,534,535],{},"Separate broad logic from exceptions clearly",[43,537,538],{},"Review the file after launches and migrations",[43,540,541],{},"Document why each non-obvious rule exists",[16,543,544],{},"A clean file is easier to trust and easier to maintain.",[29,546,548],{"id":547},"final-thoughts","Final thoughts",[16,550,551],{},"Search crawlers read robots.txt as a set of path-based instructions, not as a general statement of what you want indexed or hidden.",[16,553,554],{},"That means clarity matters. Specificity matters. Testing matters.",[16,556,557],{},"If you understand how bots match user-agents, evaluate disallow and allow paths, and interpret exceptions, you reduce the chance of accidental SEO damage dramatically.",[16,559,560],{},"Robots.txt is not difficult once you stop treating it like mysterious code and start treating it like structured crawl logic.",[16,562,563],{},"Do that, and you will make better decisions every time you touch the file.",[565,566,567],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":87,"searchDepth":100,"depth":100,"links":569},[570,571,572,574,576,578,579,580,581,582,589,590,591],{"id":31,"depth":100,"text":32},{"id":69,"depth":100,"text":70},{"id":139,"depth":100,"text":573},"What User-agent means?",{"id":185,"depth":100,"text":575},"What Disallow means?",{"id":252,"depth":100,"text":577},"What Allow means?",{"id":294,"depth":100,"text":295},{"id":343,"depth":100,"text":344},{"id":371,"depth":100,"text":372},{"id":414,"depth":100,"text":415},{"id":430,"depth":100,"text":431,"children":583},[584,585,586,587,588],{"id":435,"depth":106,"text":436},{"id":442,"depth":106,"text":443},{"id":449,"depth":106,"text":450},{"id":456,"depth":106,"text":457},{"id":463,"depth":106,"text":464},{"id":470,"depth":100,"text":471},{"id":520,"depth":100,"text":521},{"id":547,"depth":100,"text":548},"Development","2026-05-28","Confused by robots.txt syntax? Learn how crawlers interpret user-agents, disallow rules, precedence, and common mistakes that affect SEO.",false,"md","/blog/how-search-crawlers-read-robots-txt-rules.webp",{},"How Search Crawlers Actually Read Robots.txt Rules? | CampaignMorph","/blog/how-search-crawlers-read-robots-txt-rules",{"title":5,"description":594},"blog/how-search-crawlers-read-robots-txt-rules",[604,605,606,607],"SEO","Technical SEO","Web Development","robots.txt","6llgrDZ0Duwg9ElncDTLzg1DT33aGM5JS8-pb434jqQ",[610,1137,1920],{"id":611,"title":612,"author":6,"body":613,"category":592,"date":1124,"description":1125,"draft":595,"extension":596,"image":1126,"meta":1127,"metaTitle":1128,"navigation":109,"path":1129,"seo":1130,"stem":1131,"tags":1132,"__hash__":1136},"blog/blog/responsive-table-design-basics-for-non-developers.md","Responsive Table Design Basics for Non-Developers",{"type":8,"value":614,"toc":1100},[615,618,621,624,627,630,634,637,651,654,671,674,688,691,695,698,718,721,724,728,731,750,753,767,770,774,777,797,800,811,814,818,830,833,844,847,851,854,857,865,868,871,882,885,889,892,895,909,912,916,919,922,925,928,942,946,949,965,968,971,975,978,982,985,989,992,996,999,1003,1006,1010,1013,1017,1020,1024,1027,1031,1034,1054,1057,1060,1063,1066,1069,1072,1076],[11,616,612],{"id":617},"responsive-table-design-basics-for-non-developers",[16,619,620],{},"Tables are useful because they make comparison easy.",[16,622,623],{},"Pricing tiers, feature breakdowns, product specs, reporting snapshots, and campaign comparisons all become easier to scan when information is arranged in rows and columns. But the same structure that makes tables useful on desktop can make them frustrating on mobile if they are not planned carefully.",[16,625,626],{},"For non-developers, responsive tables often feel like a technical problem. In reality, the first part of the solution is editorial and structural. A table is easier to adapt when the content is well organised before anyone touches the CSS.",[16,628,629],{},"This guide explains the basics of responsive table design in plain language, with a focus on readability, structure, and accessibility.",[29,631,633],{"id":632},"start-with-the-right-question-should-this-be-a-table-at-all","Start With the Right Question: Should This Be a Table at All?",[16,635,636],{},"Not every grid of information needs to be a table.",[16,638,639,640,643,644],{},"Use a table when users need to compare values across rows and columns. That is what tables are for. MDN describes the ",[46,641,642],{},"\u003Ctable>"," element as representing tabular data, meaning information presented in a two-dimensional table made up of rows and columns. ",[645,646,650],"a",{"href":647,"rel":648},"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table",[649],"nofollow","Source",[16,652,653],{},"That means a table is a strong fit for:",[40,655,656,659,662,665,668],{},[43,657,658],{},"pricing comparisons",[43,660,661],{},"campaign performance snapshots",[43,663,664],{},"schedule matrices",[43,666,667],{},"product specifications",[43,669,670],{},"feature checklists with consistent criteria",[16,672,673],{},"A table is usually a poor fit for:",[40,675,676,679,682,685],{},[43,677,678],{},"long paragraphs",[43,680,681],{},"card-style promotional content",[43,683,684],{},"one-off callouts",[43,686,687],{},"layout-based page design",[16,689,690],{},"If the information is not truly comparative, another format may work better.",[29,692,694],{"id":693},"why-do-tables-break-on-small-screens","Why do tables break on small screens?",[16,696,697],{},"Tables become hard to use on mobile for predictable reasons:",[40,699,700,703,706,709,712,715],{},[43,701,702],{},"Too many columns",[43,704,705],{},"Long header labels",[43,707,708],{},"Long cell content",[43,710,711],{},"No clear row hierarchy",[43,713,714],{},"No visual prioritisation",[43,716,717],{},"No responsive handling plan",[16,719,720],{},"The core problem is width. A desktop table can comfortably show many columns at once. A phone screen cannot.",[16,722,723],{},"That is why responsive table design is less about “shrinking everything” and more about deciding what information matters most when horizontal space disappears.",[29,725,727],{"id":726},"good-table-structure-makes-responsiveness-easier","Good table structure makes responsiveness easier",[16,729,730],{},"Before you think about layout behaviour, make sure the table structure is sound.",[16,732,733,734,737,738,741,742,745,746],{},"MDN’s accessibility guidance emphasises the use of proper table markup so that screen readers can associate headers with data cells. It recommends using ",[46,735,736],{},"\u003Cth>"," for headers, adding ",[46,739,740],{},"\u003Ccaption>",", and using ",[46,743,744],{},"scope"," to show whether a header applies to a row or column. ",[645,747,650],{"href":748,"rel":749},"https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Table_accessibility",[649],[16,751,752],{},"For non-developers, that translates into a simple content rule:",[40,754,755,758,761,764],{},[43,756,757],{},"Every column should have a clear label",[43,759,760],{},"Every row should represent one coherent item",[43,762,763],{},"Every value should sit under the correct heading",[43,765,766],{},"The table should have a clear title or purpose",[16,768,769],{},"When those basics are missing, responsive behaviour becomes harder no matter what design technique is used later.",[29,771,773],{"id":772},"always-give-the-table-a-caption","Always give the table a caption",[16,775,776],{},"One of the easiest improvements you can make is adding a caption.",[16,778,779,780,782,783,785,786,788,789,793,794],{},"MDN says a ",[46,781,740],{}," element provides a description of the table’s contents and helps users quickly understand its purpose without reading every cell. It also notes that, if included, the ",[46,784,740],{}," must be the first child of the ",[46,787,642],{},". ",[645,790,650],{"href":791,"rel":792},"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/caption",[649]," ",[645,795,650],{"href":748,"rel":796},[649],[16,798,799],{},"For a marketing team, that means instead of publishing a table with no framing, you label it clearly:",[40,801,802,805,808],{},[43,803,804],{},"“Q3 paid media performance by channel”",[43,806,807],{},"“Feature comparison for starter, growth, and enterprise plans”",[43,809,810],{},"“Recommended image dimensions by platform”",[16,812,813],{},"A good caption improves both usability and context.",[29,815,817],{"id":816},"use-headers-properly","Use headers properly",[16,819,820,821,823,824,826,827],{},"MDN recommends using ",[46,822,736],{}," for headers rather than regular data cells, because screen readers use headers to form associations with the data they describe. It also recommends the ",[46,825,744],{}," attribute to clarify whether a heading applies to a column or row. ",[645,828,650],{"href":748,"rel":829},[649],[16,831,832],{},"In practical terms:",[40,834,835,838,841],{},[43,836,837],{},"Column labels should be actual headers",[43,839,840],{},"Row labels should be actual headers when they function that way",[43,842,843],{},"Do not fake headings with bold text alone",[16,845,846],{},"This matters for accessibility, but it also helps visual clarity. Clean headers make tables easier for everyone to scan.",[29,848,850],{"id":849},"keep-column-labels-short","Keep column labels short",[16,852,853],{},"Responsive problems often begin in the header row.",[16,855,856],{},"If your columns are labelled with long phrases like:",[40,858,859,862],{},[43,860,861],{},"“Estimated organic lead acquisition efficiency”",[43,863,864],{},"“Average monthly performance delta versus baseline”",[16,866,867],{},"The table is already under strain before it reaches mobile.",[16,869,870],{},"Shorter labels create more room:",[40,872,873,876,879],{},[43,874,875],{},"“Lead cost”",[43,877,878],{},"“Monthly change”",[43,880,881],{},"“Baseline”",[16,883,884],{},"If needed, explain the nuance in the surrounding copy or in notes below the table rather than stuffing it into the header itself.",[29,886,888],{"id":887},"reduce-the-number-of-columns","Reduce the number of columns",[16,890,891],{},"If a table is too wide, the fastest way to improve it is often to reduce what it tries to show.",[16,893,894],{},"Ask:",[40,896,897,900,903,906],{},[43,898,899],{},"Can two columns be merged?",[43,901,902],{},"Can secondary details move into a note?",[43,904,905],{},"Can this become two smaller tables?",[43,907,908],{},"Are all columns equally important on mobile?",[16,910,911],{},"Responsive design is often a prioritisation exercise. The more columns you remove, the more legible the remaining table becomes.",[29,913,915],{"id":914},"plan-for-horizontal-scrolling-when-comparison-matters","Plan for horizontal scrolling when comparison matters",[16,917,918],{},"Sometimes users genuinely need the full table, even on smaller screens.",[16,920,921],{},"In those cases, horizontal scrolling can be preferable to forcing the table into a broken, stacked layout. The goal is not to avoid scrolling at all costs. The goal is to preserve understanding.",[16,923,924],{},"If the relationship between columns matters, it is often better to keep the table intact and allow controlled sideways scrolling than to destroy the comparison logic.",[16,926,927],{},"This is especially true for:",[40,929,930,933,936,939],{},[43,931,932],{},"pricing tables",[43,934,935],{},"feature matrices",[43,937,938],{},"spec comparisons",[43,940,941],{},"campaign snapshots with aligned metrics",[29,943,945],{"id":944},"accessibility-should-not-be-lost-in-the-name-of-responsiveness","Accessibility should not be lost in the name of responsiveness",[16,947,948],{},"This is where teams sometimes go wrong. They chase a clever mobile layout and accidentally damage the table’s meaning.",[16,950,951,952,955,956,959,960,788,962],{},"MDN’s table accessibility guidance emphasises that screen readers rely on proper associations between headers and cells. It also notes that complex tables may use ",[46,953,954],{},"id"," and ",[46,957,958],{},"headers"," attributes to create explicit relationships, while simpler tables often rely on ",[46,961,744],{},[645,963,650],{"href":748,"rel":964},[649],[16,966,967],{},"The lesson for non-developers is simple: responsive design should not erase structure.",[16,969,970],{},"If the visual layout changes but the table becomes harder to understand, the design has not improved the experience.",[29,972,974],{"id":973},"a-simple-editorial-checklist-before-publishing-a-table","A simple editorial checklist before publishing a table",[16,976,977],{},"Before a table goes live, check the following:",[433,979,981],{"id":980},"_1-does-the-table-need-to-be-a-table","1. Does the table need to be a table?",[16,983,984],{},"If not, consider cards, bullets, or sections.",[433,986,988],{"id":987},"_2-does-it-have-a-caption","2. Does it have a caption?",[16,990,991],{},"Users should understand the table’s purpose instantly.",[433,993,995],{"id":994},"_3-are-the-headers-short-and-clear","3. Are the headers short and clear?",[16,997,998],{},"Short labels improve scanability and mobile fit.",[433,1000,1002],{"id":1001},"_4-are-there-too-many-columns","4. Are there too many columns?",[16,1004,1005],{},"Cut what is not essential.",[433,1007,1009],{"id":1008},"_5-is-the-most-important-information-visible-first","5. Is the most important information visible first?",[16,1011,1012],{},"Put key columns early.",[433,1014,1016],{"id":1015},"_6-will-it-still-make-sense-on-a-small-screen","6. Will it still make sense on a small screen?",[16,1018,1019],{},"If not, rethink the structure before styling.",[433,1021,1023],{"id":1022},"_7-are-headers-and-relationships-explicit","7. Are headers and relationships explicit?",[16,1025,1026],{},"Use real table logic, not just visual formatting.",[29,1028,1030],{"id":1029},"what-should-non-developers-ask-their-developer-or-cms-team","What should non-developers ask their developer or CMS team?",[16,1032,1033],{},"If you are planning a table but not coding it yourself, ask for these outcomes:",[40,1035,1036,1039,1042,1045,1048,1051],{},[43,1037,1038],{},"proper caption support",[43,1040,1041],{},"real table headers",[43,1043,1044],{},"responsive overflow handling",[43,1046,1047],{},"readable spacing on mobile",[43,1049,1050],{},"no loss of header-to-cell meaning",[43,1052,1053],{},"testing on narrow screens before publishing",[16,1055,1056],{},"Those requests are much more useful than simply asking someone to “make the table responsive.”",[29,1058,1059],{"id":547},"Final Thoughts",[16,1061,1062],{},"Responsive table design starts long before CSS.",[16,1064,1065],{},"It starts with deciding whether the content truly belongs in a table, simplifying the structure, writing better headers, and preserving meaning. Once the content is well organised, technical responsiveness becomes much easier to implement.",[16,1067,1068],{},"For non-developers, the biggest win is to stop thinking of tables as just a formatting block and start treating them as structured comparison content.",[16,1070,1071],{},"When you do that, your tables become easier to read, easier to adapt, and more useful on every screen size.",[433,1073,1075],{"id":1074},"source-references","Source references",[40,1077,1078,1084,1093],{},[43,1079,1080,1081],{},"MDN Web Docs - HTML table accessibility: ",[645,1082,748],{"href":748,"rel":1083},[649],[43,1085,1086,1087,1089,1090],{},"MDN Web Docs - ",[46,1088,740],{}," element: ",[645,1091,791],{"href":791,"rel":1092},[649],[43,1094,1086,1095,1089,1097],{},[46,1096,642],{},[645,1098,647],{"href":647,"rel":1099},[649],{"title":87,"searchDepth":100,"depth":100,"links":1101},[1102,1103,1104,1105,1106,1107,1108,1109,1110,1111,1120,1121],{"id":632,"depth":100,"text":633},{"id":693,"depth":100,"text":694},{"id":726,"depth":100,"text":727},{"id":772,"depth":100,"text":773},{"id":816,"depth":100,"text":817},{"id":849,"depth":100,"text":850},{"id":887,"depth":100,"text":888},{"id":914,"depth":100,"text":915},{"id":944,"depth":100,"text":945},{"id":973,"depth":100,"text":974,"children":1112},[1113,1114,1115,1116,1117,1118,1119],{"id":980,"depth":106,"text":981},{"id":987,"depth":106,"text":988},{"id":994,"depth":106,"text":995},{"id":1001,"depth":106,"text":1002},{"id":1008,"depth":106,"text":1009},{"id":1015,"depth":106,"text":1016},{"id":1022,"depth":106,"text":1023},{"id":1029,"depth":100,"text":1030},{"id":547,"depth":100,"text":1059,"children":1122},[1123],{"id":1074,"depth":106,"text":1075},"2026-05-22","Learn how to create responsive HTML tables that stay readable on smaller screens without sacrificing structure, clarity, or accessibility.","/blog/responsive-table-design-basics-for-non-developers.webp",{},"Responsive Table Design Guide for Non-Developers | CampaignMorph","/blog/responsive-table-design-basics-for-non-developers",{"title":612,"description":1125},"blog/responsive-table-design-basics-for-non-developers",[1133,1134,1135],"Responsive Table Design","HTML Tables","Mobile-Friendly Tables","eJvm8yFZcnu46rJRrSv2gIYG2go8KKGS_8PkbJe4HV0",{"id":1138,"title":1139,"author":6,"body":1140,"category":592,"date":1906,"description":1907,"draft":595,"extension":596,"image":1908,"meta":1909,"metaTitle":1910,"navigation":109,"path":1911,"seo":1912,"stem":1913,"tags":1914,"__hash__":1919},"blog/blog/simple-utm-naming-convention-template-small-teams.md","A Simple UTM Naming Convention Template for Small Teams",{"type":8,"value":1141,"toc":1872},[1142,1145,1148,1162,1165,1168,1171,1175,1201,1204,1207,1210,1222,1225,1229,1232,1252,1255,1258,1262,1265,1268,1294,1307,1310,1330,1333,1353,1356,1360,1363,1365,1368,1370,1400,1402,1405,1407,1439,1441,1444,1446,1468,1471,1480,1482,1504,1507,1516,1518,1535,1539,1542,1546,1552,1556,1569,1573,1582,1586,1592,1596,1602,1606,1609,1678,1681,1685,1700,1704,1718,1721,1725,1729,1735,1739,1750,1754,1759,1763,1766,1770,1780,1784,1787,1790,1810,1817,1820,1822,1825,1828,1848,1851,1854,1856,1870],[11,1143,1139],{"id":1144},"a-simple-utm-naming-convention-template-for-small-teams",[16,1146,1147],{},"UTM tracking only works when the naming system is consistent.",[16,1149,1150,1151,1154,1155,1154,1158,1161],{},"Most small marketing teams do not have a tracking problem because they forgot to add UTM parameters. They have a tracking problem because everyone names campaigns differently. One person uses ",[46,1152,1153],{},"Facebook",", another uses ",[46,1156,1157],{},"facebook",[46,1159,1160],{},"fb",", and suddenly one campaign is split into multiple rows in reporting.",[16,1163,1164],{},"The result is messy attribution, unclear acquisition reports, and wasted time in dashboards.",[16,1166,1167],{},"The good news is that you do not need a complicated framework to fix this. You need a simple convention that your team can follow every time.",[16,1169,1170],{},"In this guide, we’ll build a practical UTM naming system for small teams, show how to structure the main fields, and give you a reusable template you can adopt immediately.",[29,1172,1174],{"id":1173},"why-utm-naming-matters-more-than-most-teams-think","Why UTM Naming Matters More Than Most Teams Think",[16,1176,1177,1178,1181,1182,1185,1186,1189,1190,955,1193,1196,1197],{},"Google Analytics allows you to add UTM parameters to destination URLs so you can identify which campaigns refer traffic. Google’s documentation says you should always use ",[46,1179,1180],{},"utm_source",", ",[46,1183,1184],{},"utm_medium",", and ",[46,1187,1188],{},"utm_campaign"," when adding campaign parameters. It also notes that parameter values are case-sensitive, meaning ",[46,1191,1192],{},"google",[46,1194,1195],{},"Google"," are treated as different values. ",[645,1198,650],{"href":1199,"rel":1200},"https://support.google.com/analytics/answer/10917952?hl=en",[649],[16,1202,1203],{},"That one detail alone explains much of the broken reporting.",[16,1205,1206],{},"If your team uses inconsistent casing, spacing, separators, or abbreviations, your reports fragment. Instead of one clean line for a campaign, you get multiple rows that all represent the same effort.",[16,1208,1209],{},"For a small team, this creates three immediate problems:",[1211,1212,1213,1216,1219],"ol",{},[43,1214,1215],{},"Reporting takes longer to clean up",[43,1217,1218],{},"Performance comparisons become unreliable",[43,1220,1221],{},"Channel decisions get made on incomplete data",[16,1223,1224],{},"A naming convention solves all three.",[29,1226,1228],{"id":1227},"the-three-utm-fields-you-should-always-standardise","The Three UTM Fields You Should Always Standardise",[16,1230,1231],{},"According to Google’s URL builder guidance, the three most important UTM fields are:",[40,1233,1234,1239,1244],{},[43,1235,1236,1238],{},[46,1237,1180],{}," = the referrer, such as google, newsletter, or facebook",[43,1240,1241,1243],{},[46,1242,1184],{}," = the marketing medium, such as email, cpc, or banner",[43,1245,1246,1248,1249],{},[46,1247,1188],{}," = the specific campaign name, such as spring_sale or black_friday ",[645,1250,650],{"href":1199,"rel":1251},[649],[16,1253,1254],{},"If your team only standardises these three fields, your reporting will already improve dramatically.",[16,1256,1257],{},"Let’s make them practical.",[29,1259,1261],{"id":1260},"a-simple-convention-that-small-teams-can-actually-maintain","A Simple Convention That Small Teams Can Actually Maintain",[16,1263,1264],{},"The best naming convention is not the most elaborate one. It is the one people will use correctly every time.",[16,1266,1267],{},"For most small teams, the safest baseline is:",[40,1269,1270,1277,1282,1285,1288,1291],{},[43,1271,1272,1273],{},"Use ",[1274,1275,1276],"strong",{},"lowercase only",[43,1278,1272,1279],{},[1274,1280,1281],{},"hyphens or underscores consistently",[43,1283,1284],{},"Avoid spaces",[43,1286,1287],{},"Avoid vague labels",[43,1289,1290],{},"Keep one meaning per field",[43,1292,1293],{},"Never create duplicate names for the same platform or campaign",[16,1295,1296,1297,955,1300,1303,1304],{},"Google explicitly recommends maintaining a strict, case-sensitive naming convention and notes that values like ",[46,1298,1299],{},"Meta",[46,1301,1302],{},"meta"," are treated differently. It also recommends using a single source per platform and a single medium per channel. ",[645,1305,650],{"href":1199,"rel":1306},[649],[16,1308,1309],{},"So instead of this:",[82,1311,1313],{"className":84,"code":1312,"language":86,"meta":87,"style":87},"Copyutm_source=Facebook\nutm_medium=Paid Social\nutm_campaign=Summer Sale 2026\n",[46,1314,1315,1320,1325],{"__ignoreMap":87},[91,1316,1317],{"class":93,"line":94},[91,1318,1319],{},"Copyutm_source=Facebook\n",[91,1321,1322],{"class":93,"line":100},[91,1323,1324],{},"utm_medium=Paid Social\n",[91,1326,1327],{"class":93,"line":106},[91,1328,1329],{},"utm_campaign=Summer Sale 2026\n",[16,1331,1332],{},"Use this:",[82,1334,1336],{"className":84,"code":1335,"language":86,"meta":87,"style":87},"Copyutm_source=facebook\nutm_medium=paid_social\nutm_campaign=summer_sale_2026\n",[46,1337,1338,1343,1348],{"__ignoreMap":87},[91,1339,1340],{"class":93,"line":94},[91,1341,1342],{},"Copyutm_source=facebook\n",[91,1344,1345],{"class":93,"line":100},[91,1346,1347],{},"utm_medium=paid_social\n",[91,1349,1350],{"class":93,"line":106},[91,1351,1352],{},"utm_campaign=summer_sale_2026\n",[16,1354,1355],{},"That gives you cleaner aggregation and much easier filtering later.",[29,1357,1359],{"id":1358},"a-practical-utm-template","A Practical UTM Template",[16,1361,1362],{},"Here is a simple structure most small teams can use:",[433,1364,1180],{"id":1180},[16,1366,1367],{},"Use the platform or traffic source.",[16,1369,152],{},[40,1371,1372,1376,1380,1385,1390,1395],{},[43,1373,1374],{},[46,1375,1192],{},[43,1377,1378],{},[46,1379,1157],{},[43,1381,1382],{},[46,1383,1384],{},"instagram",[43,1386,1387],{},[46,1388,1389],{},"linkedin",[43,1391,1392],{},[46,1393,1394],{},"newsletter",[43,1396,1397],{},[46,1398,1399],{},"partner_site",[433,1401,1184],{"id":1184},[16,1403,1404],{},"Use the marketing channel type.",[16,1406,152],{},[40,1408,1409,1414,1419,1424,1429,1434],{},[43,1410,1411],{},[46,1412,1413],{},"email",[43,1415,1416],{},[46,1417,1418],{},"paid_social",[43,1420,1421],{},[46,1422,1423],{},"organic_social",[43,1425,1426],{},[46,1427,1428],{},"cpc",[43,1430,1431],{},[46,1432,1433],{},"display",[43,1435,1436],{},[46,1437,1438],{},"referral",[433,1440,1188],{"id":1188},[16,1442,1443],{},"Use the business campaign name.",[16,1445,152],{},[40,1447,1448,1453,1458,1463],{},[43,1449,1450],{},[46,1451,1452],{},"spring_sale_2026",[43,1454,1455],{},[46,1456,1457],{},"q3_demo_push",[43,1459,1460],{},[46,1461,1462],{},"new_feature_launch",[43,1464,1465],{},[46,1466,1467],{},"holiday_bundle_offer",[433,1469,1470],{"id":1470},"utm_content",[16,1472,1473,1474,1476,1477],{},"Use this to distinguish the specific creative, CTA, or placement. Google says ",[46,1475,1470],{}," can be used to differentiate creatives, such as two different links in the same email. ",[645,1478,650],{"href":1199,"rel":1479},[649],[16,1481,152],{},[40,1483,1484,1489,1494,1499],{},[43,1485,1486],{},[46,1487,1488],{},"hero_button",[43,1490,1491],{},[46,1492,1493],{},"footer_link",[43,1495,1496],{},[46,1497,1498],{},"carousel_image_1",[43,1500,1501],{},[46,1502,1503],{},"text_ad_variant_b",[433,1505,1506],{"id":1506},"utm_term",[16,1508,1509,1510,1512,1513],{},"Use this only when keyword-level tracking is actually useful. Google describes ",[46,1511,1506],{}," as the paid keyword field. ",[645,1514,650],{"href":1199,"rel":1515},[649],[16,1517,152],{},[40,1519,1520,1525,1530],{},[43,1521,1522],{},[46,1523,1524],{},"crm_software",[43,1526,1527],{},[46,1528,1529],{},"email_automation",[43,1531,1532],{},[46,1533,1534],{},"lead_generation_tool",[29,1536,1538],{"id":1537},"the-easiest-naming-rules-to-enforce","The Easiest Naming Rules to Enforce",[16,1540,1541],{},"If you want this system to survive beyond one person, keep the rules short.",[433,1543,1545],{"id":1544},"rule-1-always-use-lowercase","Rule 1: Always use lowercase",[16,1547,1548,1549],{},"This is the simplest way to avoid fragmentation. Google’s documentation specifically warns that parameter values are case-sensitive. ",[645,1550,650],{"href":1199,"rel":1551},[649],[433,1553,1555],{"id":1554},"rule-2-one-source-name-per-platform","Rule 2: One source name per platform",[16,1557,1558,1559,1181,1561,1185,1563,1565,1566],{},"Do not mix ",[46,1560,1157],{},[46,1562,1160],{},[46,1564,1302],{}," unless they truly represent different reporting entities. Google recommends a single source for each platform. ",[645,1567,650],{"href":1199,"rel":1568},[649],[433,1570,1572],{"id":1571},"rule-3-one-medium-per-channel-type","Rule 3: One medium per channel type",[16,1574,1575,1576,1578,1579,1581],{},"Use one label for each channel, such as ",[46,1577,1413],{}," or ",[46,1580,1418],{},", and stick with it.",[433,1583,1585],{"id":1584},"rule-4-match-the-campaign-name-exactly","Rule 4: Match the campaign name exactly",[16,1587,1588,1589],{},"Google recommends using a unique campaign name that matches the exact campaign name, so that a single effort does not split into multiple rows. ",[645,1590,650],{"href":1199,"rel":1591},[649],[433,1593,1595],{"id":1594},"rule-5-use-content-only-for-meaningful-differences","Rule 5: Use content only for meaningful differences",[16,1597,1598,1599,1601],{},"Do not fill ",[46,1600,1470],{}," with random notes. Use it when you are comparing creatives, buttons, versions, or placements.",[29,1603,1605],{"id":1604},"a-ready-to-use-small-team-utm-sheet","A Ready-to-Use Small-Team UTM Sheet",[16,1607,1608],{},"If you want something your team can use immediately, structure your spreadsheet like this:",[1610,1611,1612,1628],"table",{},[1613,1614,1615],"thead",{},[1616,1617,1618,1622,1625],"tr",{},[1619,1620,1621],"th",{},"field",[1619,1623,1624],{},"example",[1619,1626,1627],{},"rule",[1629,1630,1631,1641,1650,1659,1669],"tbody",{},[1616,1632,1633,1636,1638],{},[1634,1635,1180],"td",{},[1634,1637,1157],{},[1634,1639,1640],{},"platform name only",[1616,1642,1643,1645,1647],{},[1634,1644,1184],{},[1634,1646,1418],{},[1634,1648,1649],{},"channel type only",[1616,1651,1652,1654,1656],{},[1634,1653,1188],{},[1634,1655,1452],{},[1634,1657,1658],{},"official campaign name",[1616,1660,1661,1663,1666],{},[1634,1662,1470],{},[1634,1664,1665],{},"hero_video_a",[1634,1667,1668],{},"creative or placement",[1616,1670,1671,1673,1675],{},[1634,1672,1506],{},[1634,1674,1524],{},[1634,1676,1677],{},"optional keyword",[16,1679,1680],{},"And then create a second tab with your approved values:",[433,1682,1684],{"id":1683},"approved-sources","Approved sources",[40,1686,1687,1689,1691,1693,1695,1697],{},[43,1688,1192],{},[43,1690,1157],{},[43,1692,1384],{},[43,1694,1389],{},[43,1696,1394],{},[43,1698,1699],{},"youtube",[433,1701,1703],{"id":1702},"approved-mediums","Approved mediums",[40,1705,1706,1708,1710,1712,1714,1716],{},[43,1707,1428],{},[43,1709,1413],{},[43,1711,1418],{},[43,1713,1423],{},[43,1715,1438],{},[43,1717,1433],{},[16,1719,1720],{},"That single step prevents most naming drift.",[29,1722,1724],{"id":1723},"common-utm-mistakes-small-teams-should-avoid","Common UTM Mistakes Small Teams Should Avoid",[433,1726,1728],{"id":1727},"using-the-same-field-for-two-meanings","Using the same field for two meanings",[16,1730,1731,1732,1734],{},"Do not use ",[46,1733,1184],{}," for platform names and channel types simultaneously. That makes reports harder to read.",[433,1736,1738],{"id":1737},"letting-campaign-names-vary-by-person","Letting campaign names vary by person",[16,1740,1741,1742,1745,1746,1749],{},"If one person uses ",[46,1743,1744],{},"summer_sale"," and another uses ",[46,1747,1748],{},"summer-sale","you now have two campaigns.",[433,1751,1753],{"id":1752},"overloading-content-names","Overloading content names",[16,1755,1756,1758],{},[46,1757,1470],{}," should help you compare variations rather than store internal comments.",[433,1760,1762],{"id":1761},"tagging-links-inconsistently-inside-one-campaign","Tagging links inconsistently inside one campaign",[16,1764,1765],{},"If one email uses one format and the landing page button uses another, analysis becomes harder than it needs to be.",[433,1767,1769],{"id":1768},"skipping-fields","Skipping fields",[16,1771,1772,1773,1776,1777],{},"Google recommends setting all relevant UTM parameters, especially the main ones, because missing parameters can lead to ",[46,1774,1775],{},"(not set)"," values in reporting. ",[645,1778,650],{"href":1199,"rel":1779},[649],[29,1781,1783],{"id":1782},"how-to-make-adoption-easy","How to Make Adoption Easy?",[16,1785,1786],{},"A naming convention fails when it lives only in one person’s head.",[16,1788,1789],{},"To make it stick:",[40,1791,1792,1795,1798,1801,1804,1807],{},[43,1793,1794],{},"Keep a shared UTM sheet",[43,1796,1797],{},"Define approved values",[43,1799,1800],{},"Give campaign owners copy-paste templates",[43,1802,1803],{},"Use the same separators every time",[43,1805,1806],{},"Review links before launch",[43,1808,1809],{},"Build URLs with a standard tool instead of typing them manually",[16,1811,1812,1813],{},"Google provides a Campaign URL Builder to add campaign parameters to URLs. ",[645,1814,650],{"href":1815,"rel":1816},"https://ga-dev-tools.google/campaign-url-builder/",[649],[16,1818,1819],{},"That is useful because it reduces formatting errors and speeds up link creation for non-technical teammates.",[29,1821,1059],{"id":547},[16,1823,1824],{},"A good UTM naming convention should reduce thinking, not create more of it.",[16,1826,1827],{},"For small teams, the winning approach is simple:",[40,1829,1830,1833,1836,1839,1842,1845],{},[43,1831,1832],{},"Lowercase everything",[43,1834,1835],{},"Define one value per platform",[43,1837,1838],{},"Define one value per channel",[43,1840,1841],{},"Use exact campaign names",[43,1843,1844],{},"Document the rules once",[43,1846,1847],{},"Reuse them every time",[16,1849,1850],{},"That is enough to turn chaotic campaign tracking into something your team can trust.",[16,1852,1853],{},"You do not need a comprehensive taxonomy to improve attribution. You need a convention people can follow without hesitation.",[433,1855,1075],{"id":1074},[40,1857,1858,1864],{},[43,1859,1860,1861],{},"Google Analytics Help - URL builders: Collect campaign data with custom URLs: ",[645,1862,1199],{"href":1199,"rel":1863},[649],[43,1865,1866,1867],{},"Google Analytics Demos & Tools - Campaign URL Builder: ",[645,1868,1815],{"href":1815,"rel":1869},[649],[565,1871,567],{},{"title":87,"searchDepth":100,"depth":100,"links":1873},[1874,1875,1876,1877,1884,1891,1895,1902,1903],{"id":1173,"depth":100,"text":1174},{"id":1227,"depth":100,"text":1228},{"id":1260,"depth":100,"text":1261},{"id":1358,"depth":100,"text":1359,"children":1878},[1879,1880,1881,1882,1883],{"id":1180,"depth":106,"text":1180},{"id":1184,"depth":106,"text":1184},{"id":1188,"depth":106,"text":1188},{"id":1470,"depth":106,"text":1470},{"id":1506,"depth":106,"text":1506},{"id":1537,"depth":100,"text":1538,"children":1885},[1886,1887,1888,1889,1890],{"id":1544,"depth":106,"text":1545},{"id":1554,"depth":106,"text":1555},{"id":1571,"depth":106,"text":1572},{"id":1584,"depth":106,"text":1585},{"id":1594,"depth":106,"text":1595},{"id":1604,"depth":100,"text":1605,"children":1892},[1893,1894],{"id":1683,"depth":106,"text":1684},{"id":1702,"depth":106,"text":1703},{"id":1723,"depth":100,"text":1724,"children":1896},[1897,1898,1899,1900,1901],{"id":1727,"depth":106,"text":1728},{"id":1737,"depth":106,"text":1738},{"id":1752,"depth":106,"text":1753},{"id":1761,"depth":106,"text":1762},{"id":1768,"depth":106,"text":1769},{"id":1782,"depth":100,"text":1783},{"id":547,"depth":100,"text":1059,"children":1904},[1905],{"id":1074,"depth":106,"text":1075},"2026-05-24","Build a clean UTM naming convention your team can actually follow. Learn how to standardize source, medium, campaign, and content for better reporting.","/blog/simple-utm-naming-convention-template-small-teams.webp",{},"A Simple UTM Naming Convention Template for Small Teams | CampaignMorph","/blog/simple-utm-naming-convention-template-small-teams",{"title":1139,"description":1907},"blog/simple-utm-naming-convention-template-small-teams",[1915,1916,1917,1918],"UTM Parameters","Marketing Analytics","Campaign Tracking","Small Team Marketing","R4Ic85BNemkk3eVoqZ9ZYWgFI_xfD0h8NY_5kfbfYCE",{"id":1921,"title":1922,"author":6,"body":1923,"category":592,"date":2410,"description":2411,"draft":595,"extension":596,"image":2412,"meta":2413,"metaTitle":2414,"navigation":109,"path":2415,"seo":2416,"stem":2417,"tags":2418,"__hash__":2421},"blog/blog/website-icons-explained-ico-png-svg-apple-touch-icons.md","Website Icons Explained - ICO, PNG, SVG, and Apple Touch Icons",{"type":8,"value":1924,"toc":2385},[1925,1929,1932,1935,1938,1941,1945,1952,1955,1966,1969,1973,1980,1994,1997,2018,2021,2025,2028,2031,2034,2037,2041,2047,2050,2064,2067,2070,2074,2080,2083,2097,2100,2177,2183,2186,2190,2193,2196,2199,2202,2216,2219,2223,2226,2230,2233,2237,2243,2247,2250,2254,2257,2261,2265,2268,2272,2275,2279,2282,2286,2289,2293,2296,2300,2303,2323,2326,2328,2331,2334,2337,2363,2366,2368,2382],[11,1926,1928],{"id":1927},"website-icons-explained-ico-png-svg-and-apple-touch-icons","Website Icons Explained: ICO, PNG, SVG, and Apple Touch Icons",[16,1930,1931],{},"Website icons seem small, but they carry more responsibility than most teams realise.",[16,1933,1934],{},"They appear in browser tabs, bookmarks, saved shortcuts, and other interface surfaces where users rely on visual recognition. When they are missing, blurry, inconsistent, or broken, a site feels less polished than it should.",[16,1936,1937],{},"The problem is that “favicon” is often used as a catch-all term for several different icon needs. In practice, modern websites may use ICO, PNG, SVG, and Apple touch icons for slightly different jobs.",[16,1939,1940],{},"If you are building or refreshing a site, it helps to understand what each format does, where it appears, and how to choose a setup that covers the most important use cases without overcomplicating your front end.",[29,1942,1944],{"id":1943},"what-a-favicon-actually-is","What a Favicon Actually Is?",[16,1946,1947,1948],{},"MDN defines a favicon as a small icon associated with a website, displayed in places such as the browser’s address bar, page tabs, and bookmarks menu. It also notes that favicons are usually 16 × 16 pixels and are commonly stored in GIF, PNG, or ICO format. ",[645,1949,650],{"href":1950,"rel":1951},"https://developer.mozilla.org/en-US/docs/Glossary/Favicon",[649],[16,1953,1954],{},"That definition is useful because it reminds us of two things:",[1211,1956,1957,1963],{},[43,1958,1959,1960],{},"A favicon is primarily a ",[1274,1961,1962],{},"recognition asset",[43,1964,1965],{},"It is only one part of the broader website icon system",[16,1967,1968],{},"Today, your site may need icons not just for tabs, but also for bookmarks, saved-to-home-screen experiences, and modern browser features.",[29,1970,1972],{"id":1971},"why-is-one-file-format-not-always-enough","Why Is One File Format Not Always Enough?",[16,1974,1975,1976,1979],{},"In the past, many sites relied almost entirely on a single ",[46,1977,1978],{},".ico"," file.",[16,1981,1982,1983,1985,1986,1989,1990],{},"That still works in many situations, but modern browsers now support additional approaches. Web.dev explains that websites can serve a well-supported ",[46,1984,1978],{}," favicon and then upgrade to an ",[46,1987,1988],{},".svg"," favicon if available, using progressive enhancement. ",[645,1991,650],{"href":1992,"rel":1993},"https://web.dev/articles/building/an-adaptive-favicon",[649],[16,1995,1996],{},"This matters because different formats offer different strengths:",[40,1998,1999,2004,2010,2015],{},[43,2000,2001,2003],{},[46,2002,1978],{}," works widely as a legacy-friendly browser icon format",[43,2005,2006,2009],{},[46,2007,2008],{},".png"," is common for raster-based icons",[43,2011,2012,2014],{},[46,2013,1988],{}," offers scalable vector graphics",[43,2016,2017],{},"Apple touch icons serve a separate home-screen-style role",[16,2019,2020],{},"The right setup is less about picking one “winner” and more about covering the real places your brand icon appears.",[29,2022,2024],{"id":2023},"ico-the-traditional-browser-favicon-format","ICO: The Traditional Browser Favicon Format",[16,2026,2027],{},"ICO remains the classic favicon file type.",[16,2029,2030],{},"It is still useful because it is broadly recognised and often expected by browsers and older systems. If you want a dependable default that works across many environments, an ICO file is still worth including.",[16,2032,2033],{},"Think of ICO as your compatibility layer. It is the file type many teams keep in place even when they adopt more modern icon formats alongside it.",[16,2035,2036],{},"A practical reason to keep it is simple: it helps ensure that even in older or fallback scenarios, a recognisable site icon still displays.",[29,2038,2040],{"id":2039},"png-clean-familiar-and-easy-to-export","PNG: Clean, Familiar, and Easy to Export",[16,2042,2043,2044],{},"PNG is one of the most commonly used image formats in web workflows, and MDN lists it among the standard favicon formats. ",[645,2045,650],{"href":1950,"rel":2046},[649],[16,2048,2049],{},"PNG is useful when:",[40,2051,2052,2055,2058,2061],{},[43,2053,2054],{},"Your design team works from raster exports",[43,2056,2057],{},"You need predictable pixel output",[43,2059,2060],{},"You want a straightforward icon asset for web use",[43,2062,2063],{},"You are creating touch or shortcut icons at fixed sizes",[16,2065,2066],{},"PNG is often easier for teams to manage than ICO because it fits into standard design-export workflows. If a brand already has app icons, social profile images, or other square exports, PNG often becomes the easiest bridge format.",[16,2068,2069],{},"That said, PNG is still resolution-based. If you scale it beyond its intended size, it loses the flexibility of vector graphics.",[29,2071,2073],{"id":2072},"svg-scalable-and-increasingly-useful","SVG: Scalable and Increasingly Useful",[16,2075,2076,2077],{},"Web.dev’s adaptive favicon article explains that browsers have recently allowed SVG favicons and that SVGs can scale up or down without quality loss. It also notes that SVG can be very small and can even include embedded CSS and media queries. ",[645,2078,650],{"href":1992,"rel":2079},[649],[16,2081,2082],{},"This makes SVG especially attractive for modern branding systems because:",[40,2084,2085,2088,2091,2094],{},[43,2086,2087],{},"It stays crisp at different sizes",[43,2089,2090],{},"It supports vector-based precision",[43,2092,2093],{},"It can adapt more elegantly to modern UI contexts",[43,2095,2096],{},"It opens the door to light/dark theme-aware designs",[16,2098,2099],{},"Web.dev also shows an example of using:",[82,2101,2105],{"className":2102,"code":2103,"language":2104,"meta":87,"style":87},"language-html shiki shiki-themes github-light github-dark","Copy\u003Clink rel=\"icon\" href=\"/favicon.ico\" sizes=\"any\" />\n\u003Clink rel=\"icon\" href=\"/favicon.svg\" type=\"image/svg+xml\" />\n","html",[46,2106,2107,2147],{"__ignoreMap":87},[91,2108,2109,2113,2117,2121,2124,2128,2131,2133,2136,2139,2141,2144],{"class":93,"line":94},[91,2110,2112],{"class":2111},"sVt8B","Copy\u003C",[91,2114,2116],{"class":2115},"s9eBZ","link",[91,2118,2120],{"class":2119},"sScJk"," rel",[91,2122,2123],{"class":2111},"=",[91,2125,2127],{"class":2126},"sZZnC","\"icon\"",[91,2129,2130],{"class":2119}," href",[91,2132,2123],{"class":2111},[91,2134,2135],{"class":2126},"\"/favicon.ico\"",[91,2137,2138],{"class":2119}," sizes",[91,2140,2123],{"class":2111},[91,2142,2143],{"class":2126},"\"any\"",[91,2145,2146],{"class":2111}," />\n",[91,2148,2149,2152,2154,2156,2158,2160,2162,2164,2167,2170,2172,2175],{"class":93,"line":100},[91,2150,2151],{"class":2111},"\u003C",[91,2153,2116],{"class":2115},[91,2155,2120],{"class":2119},[91,2157,2123],{"class":2111},[91,2159,2127],{"class":2126},[91,2161,2130],{"class":2119},[91,2163,2123],{"class":2111},[91,2165,2166],{"class":2126},"\"/favicon.svg\"",[91,2168,2169],{"class":2119}," type",[91,2171,2123],{"class":2111},[91,2173,2174],{"class":2126},"\"image/svg+xml\"",[91,2176,2146],{"class":2111},[16,2178,2179,2180],{},"To provide an ICO fallback and an SVG upgrade. ",[645,2181,650],{"href":1992,"rel":2182},[649],[16,2184,2185],{},"That is an important modern pattern because it combines broad compatibility with better visual flexibility where supported.",[29,2187,2189],{"id":2188},"apple-touch-icons-not-the-same-as-a-regular-favicon","Apple Touch Icons: Not the Same as a Regular Favicon",[16,2191,2192],{},"A common mistake is assuming a favicon automatically covers every saved-icon scenario. It does not.",[16,2194,2195],{},"Apple touch icons are typically used for saved shortcuts or home-screen-style experiences on Apple devices. They are not simply interchangeable with the small browser-tab favicon.",[16,2197,2198],{},"That is why teams often need a dedicated touch icon asset even if the favicon itself is already working correctly.",[16,2200,2201],{},"In practical terms, your site icon system may need:",[40,2203,2204,2207,2210,2213],{},[43,2205,2206],{},"one browser-friendly default icon",[43,2208,2209],{},"one or more fixed-size raster exports",[43,2211,2212],{},"one mobile-friendly home-screen icon",[43,2214,2215],{},"possibly a scalable SVG version for modern browsers",[16,2217,2218],{},"Treating all of those as one file usually leads to compromises.",[29,2220,2222],{"id":2221},"so-which-format-should-you-use","So, Which Format Should You Use?",[16,2224,2225],{},"The answer depends on your goals, but for most modern marketing sites and content sites, a sensible approach is:",[433,2227,2229],{"id":2228},"use-ico-for-broad-fallback-support","Use ICO for broad fallback support",[16,2231,2232],{},"This gives you a dependable, legacy-friendly favicon layer.",[433,2234,2236],{"id":2235},"use-svg-for-modern-browsers-when-you-want-sharp-scaling","Use SVG for modern browsers when you want sharp scaling.",[16,2238,2239,2240],{},"This is especially useful for simple brand marks, geometric symbols, and theme-aware icon systems. Web.dev specifically highlights SVG’s scalability and adaptive styling potential. ",[645,2241,650],{"href":1992,"rel":2242},[649],[433,2244,2246],{"id":2245},"use-png-for-fixed-size-exports-and-touch-style-use-cases","Use PNG for fixed-size exports and touch-style use cases",[16,2248,2249],{},"PNG fits neatly into design production workflows and remains widely useful.",[433,2251,2253],{"id":2252},"use-a-dedicated-apple-touch-icon-when-needed","Use a dedicated Apple touch icon when needed.",[16,2255,2256],{},"Do not assume your main favicon setup automatically handles every saved-home-screen context well.",[29,2258,2260],{"id":2259},"common-website-icon-mistakes","Common Website Icon Mistakes",[433,2262,2264],{"id":2263},"using-only-one-low-resolution-file-everywhere","Using only one low-resolution file everywhere",[16,2266,2267],{},"A tiny icon may work in a tab but look weak in larger saved contexts.",[433,2269,2271],{"id":2270},"forgetting-brand-simplification","Forgetting brand simplification",[16,2273,2274],{},"A detailed logo often becomes unreadable at favicon size. Small icons need strong shapes, not full visual systems.",[433,2276,2278],{"id":2277},"mixing-unrelated-icon-versions","Mixing unrelated icon versions",[16,2280,2281],{},"Users notice when the tab icon, bookmark icon, and touch icon do not feel like they are part of the same brand.",[433,2283,2285],{"id":2284},"skipping-svg-when-your-mark-is-vector-friendly","Skipping SVG when your mark is vector-friendly",[16,2287,2288],{},"If your icon is simple and adaptable, SVG may produce cleaner results in modern browsers.",[433,2290,2292],{"id":2291},"assuming-favicon-work-is-done-forever","Assuming favicon work is “done forever”",[16,2294,2295],{},"Icons should be reviewed whenever a site redesign, brand refresh, or UI overhaul happens.",[29,2297,2299],{"id":2298},"a-practical-icon-strategy-for-most-sites","A Practical Icon Strategy for Most Sites",[16,2301,2302],{},"If you want a simple decision framework, use this:",[40,2304,2305,2308,2311,2314,2317,2320],{},[43,2306,2307],{},"Create one clean master icon concept",[43,2309,2310],{},"Simplify it for tiny-sized recognition",[43,2312,2313],{},"Export an ICO fallback",[43,2315,2316],{},"Export one or more PNG versions for fixed-use cases",[43,2318,2319],{},"Add an SVG version if the mark works well as a vector",[43,2321,2322],{},"Include a dedicated Apple touch icon if your audience may save the site to devices",[16,2324,2325],{},"This gives you a practical system instead of a one-file gamble.",[29,2327,1059],{"id":547},[16,2329,2330],{},"Website icons are small, but they shape perception at exactly the moments users look for reassurance.",[16,2332,2333],{},"A recognisable icon in a tab, bookmark, or saved shortcut reinforces trust, polish, and consistency. That is why choosing between ICO, PNG, SVG, and Apple touch icons is not just a technical decision. It is part of brand delivery.",[16,2335,2336],{},"The simplest way to think about it is this:",[40,2338,2339,2345,2351,2357],{},[43,2340,2341,2344],{},[1274,2342,2343],{},"ICO"," helps with compatibility",[43,2346,2347,2350],{},[1274,2348,2349],{},"PNG"," helps with fixed-size exports",[43,2352,2353,2356],{},[1274,2354,2355],{},"SVG"," helps with modern scalability and adaptability",[43,2358,2359,2362],{},[1274,2360,2361],{},"Apple touch icons"," help with saved mobile experiences",[16,2364,2365],{},"Use them as a system, and your brand will show up more cleanly everywhere it matters.",[433,2367,1075],{"id":1074},[40,2369,2370,2376],{},[43,2371,2372,2373],{},"MDN Web Docs - Favicon glossary: ",[645,2374,1950],{"href":1950,"rel":2375},[649],[43,2377,2378,2379],{},"web.dev - Building an adaptive favicon: ",[645,2380,1992],{"href":1992,"rel":2381},[649],[565,2383,2384],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":87,"searchDepth":100,"depth":100,"links":2386},[2387,2388,2389,2390,2391,2392,2393,2399,2406,2407],{"id":1943,"depth":100,"text":1944},{"id":1971,"depth":100,"text":1972},{"id":2023,"depth":100,"text":2024},{"id":2039,"depth":100,"text":2040},{"id":2072,"depth":100,"text":2073},{"id":2188,"depth":100,"text":2189},{"id":2221,"depth":100,"text":2222,"children":2394},[2395,2396,2397,2398],{"id":2228,"depth":106,"text":2229},{"id":2235,"depth":106,"text":2236},{"id":2245,"depth":106,"text":2246},{"id":2252,"depth":106,"text":2253},{"id":2259,"depth":100,"text":2260,"children":2400},[2401,2402,2403,2404,2405],{"id":2263,"depth":106,"text":2264},{"id":2270,"depth":106,"text":2271},{"id":2277,"depth":106,"text":2278},{"id":2284,"depth":106,"text":2285},{"id":2291,"depth":106,"text":2292},{"id":2298,"depth":100,"text":2299},{"id":547,"depth":100,"text":1059,"children":2408},[2409],{"id":1074,"depth":106,"text":1075},"2026-05-26","Learn the difference between ICO, PNG, SVG, and Apple touch icons, where each is used, and how to choose the right setup for modern websites.","/blog/website-icons-explained-ico-png-svg-apple-touch-icons.webp",{},"Website Icons Explained - ICO, PNG, SVG, and Apple Touch Icons | CampaignMorph","/blog/website-icons-explained-ico-png-svg-apple-touch-icons",{"title":1922,"description":2411},"blog/website-icons-explained-ico-png-svg-apple-touch-icons",[606,2419,2420],"Graphic Design","Web Design","T3LfueIUBnWH6sfswdcKsAluglGmb5yObsvxcU1ZV8g",1781606105740]