In Google SEO design, it is necessary to set the correct Favicon, Title, Description, Keywords, and Image alt attributes. In addition to these elements, it is also important to ensure that the website displays correct card information when shared on platforms like Twitter, Discord, and Telegram.
Development is often a hurried process, and details can easily be overlooked. Only by documenting these aspects can we avoid forgetting them.
The first point to mention is that SEO rankings are always tied to user traffic. What developers can do is to provide search engines with more accurate and clear content and data.
Updating information takes time to be processed and indexed. However, there are some tricks to accelerate this process. For example, you can update the sitemap in Google Search Console to prompt search engines to crawl your site more frequently.
1. The Important Favicon, Title, and Description
1.1 Favicon
<link rel="shortcut icon" href="path/to/favicon.ico" type="image/x-icon" />
In the Favicon settings, the shortcut and type fields can both be omitted in modern browsers.
<link rel="icon" href="/favicon.ico" />
The recommended priority for Favicon file types is as follows: ico > png > svg > gif. ICO files have good compatibility, but PNG files are smaller and more universal. SVG is convenient to use but may fail to parse in some cases. GIF is untested and rarely seen in use on websites.
Favicons can be set in multiple sizes to accommodate various devices, including the 180×180 pixel apple-touch-icon and the 512×512 pixel size for Android launch screens. The latest summary on this topic can be found in the article 《How to Favicon in 2025: Three files that fit most needs》.
- 57×57 pixels: For older iPhones and iPod Touch.
- 72×72 pixels: For iPad.
- 114×114 pixels: For retina display iPhones and iPod Touch.
- 144×144 pixels: For iPad 3.
Sometimes we don't need so many file sizes in HTML, but these files can also be used in PWA settings within the manifest.json. In this case, the larger sizes become necessary. For example, icons for mobile devices should be at least 64x64, and for iPads, they should be at least 128x128. Therefore, including an image larger than 180x180 is still important.
Note: When multiple icons are specified, the browser will directly use the first <link rel="icon" />. Therefore, the specific file you want to use should be placed in the first line.
1.2 Title, Description
Currently, the importance of Keywords has diminished significantly. In practice, there is no observed correlation between the use of keywords and search engine rankings. There are no articles proving their effectiveness, while there are plenty of discussions suggesting that they are essentially useless.
On the other hand, Title and Description are the most critical pieces of information. They can be directly set in the head section of the HTML. However, each page requires unique content, which means static generation of different text for each page is necessary. To achieve this efficiently, you can leverage Next.js's Metadata feature to automatically set metadata for each page. This allows you to define a metadata object statically for each page.
export const metadata: Metadata = {
title: 'xxx',
description: 'xxx',
keywords: 'xxx'
}
2. Adapting to Twitter/Discord/Telegram
Among these platforms, Twitter is the most complicated to set up. Let's start with the other two first.
2.1 Discord/Telegram
For Discord, when a link is sent in a message, it will immediately parse and display the link preview. However, Discord prioritizes Open Graph (OG) tags for the title and description. If you set og:title but do not set og:description, the description will show up as empty, even if you have set the <meta name="description"> tag. This is an area where Telegram performs better, as it has fallback handling for such cases.
Therefore, when setting the title and description, it is essential to update both parts simultaneously:
const title = 'xxx',
description = 'xxx',
keywords = 'xxx'
export const metadata: Metadata = {
title,
description,
keywords,
openGraph: {
title,
description
}
}
Using Next.js to set openGraph has the added benefit that you don't need to worry about whether to use name or property when setting <meta /> tags.
Discord, TG, and Twitter all have caching issues. Since Discord and Telegram immediately parse the link in the message, it's easier to debug.
2.2 Debug
You can test links that have not been sent before to directly check if the added text has been updated.
If you need to view the same webpage, you can add a suffix ?v=1 to the page link, which will make it load as a new link.
Caching issues can also cause updates to different og:image files to fail, because the image is the same link. In this case, you can also add a suffix ?_=xxx to the link without changing the filename, and xxx can be continuously replaced with a new marker.
2.3 Twitter
Twitter does not use HTML + OG data; it requires its own specific meta tags in the format <meta name="twitter:xxx" content="xxx">. Additionally, you must specify twitter:card to determine the display size and style.
Note: For Twitter image settings, you cannot use relative paths like /cover.png; you must use an absolute path.
When loading Twitter-related meta information, it is prone to failure; if any information is incorrect, it may not load any of the meta data. Therefore, Twitter settings must be carefully and completely configured.
Twitter's twitter:title and twitter:description updates are relatively fast; you can see the new text within 30 seconds after setting them. Similarly, you can use the suffix update ?v=1 to debug whether the new settings have taken effect.
const title = 'xxx',
description = 'xxx',
keywords = 'xxx'
export const metadata: Metadata = {
title,
description,
keywords,
openGraph: {
title,
description
},
twitter: {
title,
description
}
}
The image update on Twitter is relatively slow; it may take half a day or even several days to see the new image. Therefore, when setting images, it's important to optimize their size to avoid any issues with Twitter's image parsing.
If you set the type to summary, the actual display size will be around 120x120. Setting an image to 240x240 can meet the requirements for Discord, TG, and Twitter. By compressing the image size, you can reduce it to around 10KB.
3. Unclear Things
What is <script type="application/ld+json">? I'm not entirely clear on its specific function yet, but I often see it mentioned in various articles. It seems to be used to explicitly indicate certain aspects of website content. The specific areas it can highlight still need further research.