of inspect A feature in Chrome (also known as Inspect Element) allows you to check inside a page or website. You can also use it to diagnose problems, test site changes, and monitor your competitors.
Right-click on any page and scroll down to Inspect to see the code used to build your site.
The page will appear in the left pane, and the right side will display various tabs containing all the code for your site. You can expand and collapse elements to see the code for that page.
from element Tabs let you see how your page will look if you edit, delete, or add elements. You can also find information on how to set up your website. Console, Source, Network, and other tabs are also useful for more advanced technical audits.
While it's helpful to know basic HTML and CSS, many basic questions require element If you know what code to look for, click on the tab.
1. What color is it?
Use Inspect to find the unique hex code for any color on the web.
- Right-click the element you want to display.
- Scroll down to find the color swatch and hex code.
- Click on a swatch to experiment with different colors for that element.
Every color has a unique hexadecimal code or a combination of universal 6-digit codes that represent the color. For example, pure white is #FFFFFF, pure black is #000000, and mint green is #98FF98.
If you can't find the color you're looking for, check to see if there are any color settings on the parent element that might override the child elements.
This is useful for solving questions such as:
- What colors do users prefer? Can they find a fresh color to try?
- What colors are your competitors testing for calls to action?
- Do the colors on my site follow your brand guidelines?
- Does the color combination follow usability guidelines?
2. What font is that?
Serif fonts are popular right now. You can find new fonts on any site by right-clicking an element and looking for Font CSS.
- Right-click Copy.
- Of the lower[スタイル]In the tabs, look for the same tag.
- Scroll down to the font tag.
If multiple fonts are listed in the code, they are backup fonts. The first font is the default and is displayed if the user's browser has access to that font. If for some reason that font is unavailable, the browser will fall back to her second font in the list, and so on.
You can also check the font size and line height.
Choosing the right font size depends on the font, line height, and weight. As a rule of thumb, we recommend aiming for at least 14 pixels for body fonts and 20 pixels for header fonts.
- H1: 30-34 pixels
- H2: 28-30 pixels
- H3: 24-26 pixels
- H4: 20-22 pixels
- Body: 16-18 pixels
3. Will that content change look good?
Use Inspect to see what your changes will look like before you actually publish them. This is especially useful if you need to take a screenshot for approval before or after you start editing a page, or if you want to see how your changes look on desktop and mobile first.
- Examine the element you want to change.
- Double-click the copy you want to edit.
- Edit the copy.
- Click outside the element.
- Make small adjustments until you're satisfied.
If the element you're editing contains multiple pieces of code within an element (such as a link within a paragraph), right-click Copy and select[HTML として編集]Select to edit the entire selection.
Get the daily newsletter search that marketers rely on.
4. What image is that?
Right-click and inspect the image to find the image link, size, and alt text.
Answer basic technical questions about any image.
- Do my images have appropriate alt text?
- Is the image a duplicate?
- Is the image size too large?
- Can image size affect page speed?
- Where can I find the original image source?
- What images are your competitors using?
This works for all types of images, including icons and background images. If you can't find the image you need, look in your code for words like image, background, src, img, jpg, png, carousel, etc.
5. What kind of link is it?
Inspect lets you see if a link is set up the way you want without actually clicking the link. Test whether the link is set to nofollow or follow and whether the link opens in the same tab or in a different tab. Alternatively, use Inspect to find redirect chains or 301s.
- Right-click any link.
- Find the tag.
- Check which URLs your target is linking to.
- Look for tags like rel=“nofollow”. This tells Google to ignore that link for ranking purposes.
- Look for tags like target=“_blank”. This tells the browser to open the link in a new or blank tab.
You can also check if you got a new follow or nofollow backlink on another site. This is useful if you only want to check one link instead of running a check with a backlink tool like Ahrefs or Semrush.
If you check your links often, you can also use browser extensions to automatically highlight different types of links depending on their tags.
6. Which code is broken?
Use Inspect to troubleshoot issues with site elements. If you can identify which part of the code is causing the problem, you can resolve the problem.
When you need to work with a developer or technical team to solve a problem, it's easier to be able to highlight exactly what you need in your code.
- Right-click anywhere on the element.
- inside element In the sidebar, hover your mouse over each HTML element to find the one you want.
- Use the arrows to expand the section to view child code elements.
- The element to which the code corresponds is highlighted in the left pane of the site. Keep hovering and zooming until you find it.
7. What kind of schema is it?
For most sites, you can use Schema Validator to check your site's schema. However, some sites block the Schema Validator bot from using the option to retrieve URLs directly.
You can use this tool or type it directly into your code to see your competitors' site schemas.
- Move to the page you want to check.
- Right-click anywhere on the page and View page source.
- Select all page codes (Ctrl+A and Ctrl+C).
- Go to https://validator.schema.org/.
- click code snippet.
- Paste all the code (Ctrl+V).
- click Running the test.
- All schema elements found on that page are displayed.
If you think the validator is wrong or flags a broken schema, you can check directly for schema-like code in your markup. This is useful when troubleshooting schema fields or discovering why your schema isn't showing up in the SERPs.
- Right-click anywhere on the page.
- Expand the sections within the Elements tag until you find the schema.org tag. The schema is usually Contained somewhere within the tag.
- If it's not neatly organized, right-click, edit as HTML, and copy the entire block to your Notepad program.
- If it still doesn't appear, right-click the page and click View page sourceClick and search for “schema” in the page code (Ctrl+F).
The opinions expressed in this article are those of the guest author and not necessarily those of Search Engine Land. Staff authors are listed here.