How to Add Google Preferred Sources to Tistory

Add the generated code to your Tistory skin once, and an Add as a preferred source on Google button can appear on every post. This guide shows how to back up your skin, place the code beside the post-body placeholder, apply the change, and test it on mobile and desktop.

[##_article_rep_desc_##]

Confirm your Tistory address first

If you use the default Tistory address, enter yourblog.tistory.com. If you connected a custom domain, use the canonical domain that visitors open and search results display. The generator removes paths when you paste an individual post URL.

Google supports sources at the domain or subdomain level, not at the subfolder level. Before installing the button, use the generator’s source-check feature to confirm that Google can find the address.

1. Generate code for Tistory

1. Open the Google Preferred Sources Button Generator.
2. Enter your public Tistory address.
3. Select Tistory as the platform.
4. Choose before-post or after-post placement.
5. Select the light or dark theme and button language.
6. Click Generate My Installation Code and copy the recommended code in full.

2. Back up your current Tistory skin

Back up the active skin before editing HTML. In Tistory Admin, go to Appearance → Change Skin and use Download or the archive feature. A backup lets you restore the previous design if the editor reports an error or the layout breaks.

3. Paste the code into the skin HTML

1. Go to Appearance → Edit Skin in Tistory Admin.
2. Open Edit HTML.
3. Click in the editor and search for [##_article_rep_desc_##].
4. For before-post placement, paste the generated code immediately before the placeholder. For after-post placement, paste it immediately after.
5. Click Apply to save.

WPlaybook’s generated code includes the <s_permalink_article_rep> condition, so the button appears on individual posts rather than archive pages. It also loads Google’s official publisher.js script and renders the button according to the selected theme and the visitor’s language.

4. Test on desktop and mobile

Open a public post on both desktop and mobile and check the placement. Tistory’s in-app browser and the KakaoTalk browser may keep an older cached page. If the change is missing, close and reopen the window or test in an incognito tab of a regular browser.

If the button does not appear

• If the placeholder appears more than once, choose the actual post-content placeholder inside <s_permalink_article_rep>.
• Compare the pasted code with the generated version to check for missing lines or changed quotation marks.
• Check whether skin optimization delays or blocks external JavaScript.
• Temporarily disable ad blocking or content blocking while testing.
• If you change skins later, reinstall the code in the new skin HTML.

Frequently asked questions

Should I enter the default Tistory address or my custom domain?

Use the canonical public address shown in search results and used by visitors. If you have fully migrated to a custom domain, that is usually the correct choice.

Do I have to edit every post?

No. Install the code once around the post-body placeholder, and it will apply to existing and future posts that use the skin.

Will the code survive a skin change?

Not necessarily. Code added directly to one skin’s HTML may not carry over to another skin. Reinstall it after switching themes.

You can also review Tistory’s official skin documentation for post placeholders and permalink conditions.